Vue组件之父子通信

前言

vue组件的通信部分是很重要的，组件是协同工作的，这意味着它们要互相通信。看官网文档时，我是比较吃力的，谁让我是菜鸟呢 o(￣▽￣)ｄ

引用官网一段话：

在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息

并配图：

刚开始看的时候，我是懵逼的，后来敲了几遍，初步了解了怎么回事，为啥是初步呢，因为没踩过坑啊，也不知道坑在哪啊。哎，我废话真多。

父组件向子组件通信

使用props传递数据

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项

先前写了一篇Vue组件之props传递数据，这其实就是一个父向子传递数据的过程。在这，我再举一个例子。

实例

<div id="app">
       <my-button val="toggle"></my-button>
       <my-button val="search"></my-button>
       <my-button val="click"></my-button>
</div>

   <script>

       Vue.component('my-button',{
           props:['val'],
           template:'<input type="button" :value="val">'
       });

       var vm=new Vue({
           el:'#app',
       });
   </script>

上面代码中，div部分是父级，Vue.component(...)部分是子级，子组件要显式地用props选项声明它期待获得的数据。

在这里，子级想要获取的就是val，这是父级传递过来的，是手动添加的自定义属性，属性值是希望展现的内容。我希望每个按钮实现不同功能，所以传递不同的val值，并动态绑定在子级的value上，格式如上。要注意的是，必须动态绑定在value上，即用v-bind，缩写为:。

结果：

这其实是这样的一个过程：我定义了一个按钮组件，需要在页面中多处引用，它们的样式是一致的，但是我想它们实现不同的功能，于是通过在父组件上绑定自定义属性，并使用props传递给子组件，去修改子组件的一小部分。从上面代码可以看出，这很方便。（我希望我没说错）

子组件向父组件通信

使用自定义事件

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

这到底是几个意思呢，我也是懵逼的，我按着自己的理解，写了一个例子。

实例

<div id="app">
       <p>{{count}}</p>
       <button-counter @add="addCount"></button-counter>
</div>

<script>

       Vue.component('button-counter',{
           template:'<input type="button" value="change count" @click="changeCount">',
           methods:{
               changeCount:function(){
                   this.$emit('add');
               }
           }
       });

       var vm=new Vue({
           el:'#app',
           data:{
               count:1
           },
           methods:{
               addCount:function(){
                   this.count++;
               }
           }
       });
  </script>

暗示自己不要被代码吓到，我写的太简单了。子组件button-counter是一个按钮，我需要点击它去改变父组件的count值。步骤：

在子组件，即按钮上添加changeCount点击事件
在changeCount事件函数中，添加代码this.$emit('add')，这个add是自定义事件，需要添加到父级上，this.$emit()就当做固定格式吧
在父级添加add自定义事件，用v-on指令，缩写为@，如上
在add自定义事件上添加事件函数addCount，addCount定义在实例里，这个函数里就是具体操作代码，即this.count++，以实现count的改变

这些就是基本步骤了，好吧，好像说的比较烂，不过应该是对的，至少我运行成功￣▽￣。错了也没人知道，反正我自己看。开玩笑，其实是我不会用专业语言叙述，不少东西我也没提到，因为我也不熟啊，推荐看官网文档，虽然说的比较隐晦，但保证质量啊。