Vue 父子通信（props，$.emit( ) )

不全面，请参考官网进行理解。

组件实例作用域孤立，组件不让父子之间进行通信，data里面的数据不能作为全局的使用了。

Vue.component ('child', {
    //定义props
    props : ['message']
    //message是我们预期的父组件数据
    template:'<span>{{message}}</span>'
    //template里面定义child的模版
    })

<child message = 'hello'><child>
//渲染为<span>hello</span>

其中child就相当与父组件，span就相当与子组件。

子传父，使用$.emit( )

<div id = 'A'>
    <p>{{mes}}</p>
    <myButton v-on:inC = 'inB'><myButton>
    <myButton v-on:inC = 'inB'><myButton>
</div>

Vue.component('myButton', {
    template: '<button v-on:click='inD'> {{mes2}} </button>'
    data:function(){
        return {
            mes2 : 0
        }
    },
    methods : {
        •inD: function(){
        //inD是子组件点击事件触发的函数
            this.mes2 += 1
            //在这里使用了$emit()与父组件的 inC 绑定，当 inD 函数执行，就会使 inC 事件触发，执行父组件的 inB 函数
            •this.$emit('inC')
        }
    }
})

new Vue ({
    el:'#A',
    data: {
        mes: 0
    }
    methods: {
        •inB: function(){
            this.mes += 1
        }
    }
})