Vue父组件与子组件之间通信

一、父组件向子组件传递信息

1. 利用props（这种比较基础，就不细写了）

// 父组件：




// 子组件：

2. 利用refs API
   首先来看看refs是什么，官方给出的描述:一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例，也就是说只要我们给子组件注册ref属性，之后便可以通过refs这个API获得到子组件的DOM元素和Vue组件实例，也就可以调用子组件的方法。

// 父组件：



// 子组件：

二、子组件向父组件传递信息

回想我们在开发中，用element-ui、iview等这类组件时，数据是如何“绑定”到组件上的？v-model。

1. $emit API
   首先还是来看看官方的说明emit，触发当前实例上的事件。附加参数都会传给监听器回调，然后在父组件里使用v-on监听处理这个事件。

   Vue.component('welcome-button', {
     template: `
       
         Click me to be welcomed
       
     `
   })
   
   
     
   
   
   new Vue({
     el: '#emit-example-simple',
     methods: {
       sayHi: function () {
         alert('Hi!')
       }
     }
   })
   

2. v-model
   v-model本质上是一个语法糖，它包含一个prop和一个event，默认这个prop是value、event是input，先来看看下面的例子：

   // 子组件
   
   
   
   
   // 父组件
   
   
   
   

   子组件就是一个简单的input框，使用v-on监听绑定input和change事件（均为原生事件），在其value发生变化时调用this.$emit('input', event.target.value);，告诉父组件“我这里发生了input事件，我的value已经改变了，现在的值是event.target.value”，而在父组件上只要对input事件进行监听和处理即可，v-model其实就是在监听到input事件的时候，将子组件中的value prop赋值给绑定的参数。
   再来看看官方的例子：

   Vue.component('base-checkbox', {
     model: {
       prop: 'checked',
       event: 'change'
     },
     props: {
       checked: Boolean
     },
     template: `
       
     `
   })
   
   
   

   最开始这个lovingVue的值会传给子组件的chekced变量，而当checked的值发生改变之后就会触发input的change事件（这里的change是HTML input原生的事件），进而调用v-on:change绑定的$emit('change', $event.target.checked)将事件传递给父组件，同时把改变后的值一并传过去，所以
   
   其实就等同于