Vue父子组件通信

父组件向子组件传递数据

通过prop传递

父组件可以通过prop向子组件传递数据（父组件通过v-bind 来动态传递 prop，子组件可以像访问data里面的值访问父组件传递的prop值）。Prop有两种声明形式：一种是字符串数组的形式，例如：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

，也可以指定prop的类型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

单向数据流：父组件prop的更新会下流到子组件，反之不允许在子组件改变prop的值。如果尝试在子组件修改prop的值，vue会在浏览器的控制台发出警告。

这里有两种常见的试图改变一个 prop 的情形：

• 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。最好定义一个本地的 data 属性并将这个 prop 用作其初始值
• 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

使用ref

通过ref特性为子组件赋值一个ID引用，例如

<base-input ref="usernameInput"></base-input>

就可以通过this.$refs.usernameInput获取子组件对象,可以通过这个对象获取子组件的data属性和调用子组件的方法。例如：

this.$refs.usernameInput.focus()

可以调用子组件的focus方法。方法可以携带参数进行操作。

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

子组件向父组件传递数据

使用$emit触发事件。子组件通过this.$emit(“自定义事件名”)触发事件,父组件通过v-on:事件名可以捕捉到事件。
例如

this.$emit('welcome') //子组件触发welcome事件

<sub-component @welcome=”aa”></sub-component> //父组件捕捉到welcome事件，执行自定义方法aa。

使用$emit可以携带参数，api如下：

vm.$emit( eventName, […args] )

自定义组件的v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突：

<Child v-model="lovingVue"></Child>  //父组件


//当子组件触发change事件时将会将checked的值传给lovingVue
model: {								
    prop: 'checked',					 
    event: 'change'
  },
  props: {
    checked: Boolean
  },

这里的 lovingVue 的值将会传入这个名为 checked 的 prop(父组件通过props属性同步子组件数据)。同时当 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新（子组件通过事件传参同步父组件数据）。这样就实现v-model双向绑定的特性。