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>