Vue 组件通信 ---- 父子组件通信

Vue 组件通信

组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信

自定义事件

当组件需要向父组件传递数据时，就要用到自定义事件，v-on 除了监听DOM事件外，还可以用于组件之间 的自定义事件。

• JavaScript的设计模式里面有一种’观察者模式’.Vue组件也由于只类似的一套模式，子组件用’$emit()’ 来触发事件，父组件用on来监听子组件的事件。
• 父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件

        
总数：{{total}}
        
        
    
    

$emit()方法的第一个参数是自定义事件的名称，如下图：increase和reduce后面的参数都是要传递的数据可以不填或者填多个

除了用v-on在组件上监听自定义事件2，也可以监听DOM事件，这是时可以用.native 修饰符表示监听的是一个原生事件，监听的是该组件的根元素如

使用v-model

Vue2.x可以用在自定义组件上使用 v-model 指令

        
总数：{{total}}
        
        
    
    

任然是点击按钮加1的效果，不过这次组件$emit()的事件名是特殊的input,在使用组件的父级，并没有在上使用@input=“handler”,而是直接使用了v-model 绑定的一个数据total 。 这也可以成为是一个语法糖，因为上面的实例可以用自定义事件来实现：如下

        
总数：{{total}}
        
        
    
    

v-model 还可以用创建自定义的表单输入组件，进行数据双向绑定，eg:

        
总数：{{total}}
        
        -1
    
    

*实现这样一个具有双向绑定的v-model 组件要满足下面两个条件：

• 接收一个value 属性
• 再有新的 value 时触发 inputt 事件