VUE父子组件传参

  • 父组件。父组件,通过在子组件中,使用v-bind绑定到子组件的props中定义的变量。接收子组件使用v-on:绑定事件,接收子组件传递的数据。
<template>
    <div>
         <h1>hello</h1>
         <v-child :msg='msg' @cmsg="cmsg"></v-child>
         {{childmsg}}
    </div>
</template>

<script>
import child from '@/components/child'
export default {
    name:'parent',
    data:function(){
        return {
            'msg': 'hello everybody',
            childmsg: ''
        }
    },
    methods:{
        cmsg:function(obj){
            this.childmsg =obj
        }
    }
    ,
    components:{
        'v-child': child
    }
}
</script>
  • 子组件
<template>
    <div>
       
            {{msg}}
           <button @click="toparent">传值到父组件</button>
    </div>
</template>

<script>
export default {
    name:'child',
    data:function(){
        return {

        }
    },
    methods:{
        toparent:function(){
            this.$emit("cmsg", "来自子组件的数据")
        }
    }
    ,
    props:['msg']
}
</script>

posted @ 2019-10-24 21:23  京CT9092  阅读(113)  评论(0编辑  收藏  举报