VUE 学习之父子之间数据传递

目前父子组件数据传递一般是： 父组件通过props向子组件进行传递数据，子组件通过$emit方法向父组件发送数据，父组件监听子组件发送过来的数据。 

 

<div id="app">
    <child-comp
      :parent-msg="parentMsg()"
      @child-event="handleChildEvent"
    ></child-comp>
</div>

 

Vue.component('child-comp', {
    template: "<div><button @click='sendMsgToParent'>send msg to parent</button></div>",
    data: function () {
        return {
            childMsg: 'Hello, I am Child'
        }
    },
    props: ['parentMsg'],
    methods: {
        sendMsgToParent(){

            this.$emit("child-event", this.childMsg);
        }
    },
    mounted () {
        console.log('child mounted, parent msg: ' + this.parentMsg)
    }
});
const app = new Vue({
    el: '#app',
    data: function () {
        return {
            parentData : "parent Message"
        }
    },
    methods: {
        parentMsg(){
            return this.parentData;
        },
        handleChildEvent(event){
            console.log("the msg from child: " + event);
        }
    }
})

 

这个例子实例动态绑定了parent-msg 通过props传递给了子组件。 在子组件中的button 点击事件中发送子组件中的数据给父组件。