组件之间的数据共享（常用）

组件之间的数据共享

父->子

使用自定义属性props（props在子组件中）

子->父

使用自定义事件

子写自定义事件并传入数据，父亲使用子组件绑定自定义事件并用事件对应的函数接收数据

兄弟组件

vue2中使用EventBus

1. 创建eventBus.js模块，并向外共享一个Vue的实例对象
2. 在数据发送方，调用**bus.$emit(‘事件名称’,要发送的数据)**方法触发自定义事件
3. 在数据接收方，调用**bus.$on(‘事件名称’,事件处理函数)**方法注册一个自定义函数
   

个体理解：相当于在二者之间创建了一个共享的Vue实例，在两个组件都被命名为了bus。之后的操作同子->父一样，先在发送方创建自定义事件，接收方直接使用bus实例.$on绑定事件，回调函数接收结果。

bus总线注意：因为bus在总线，所以on接收的时间要比emit的时间早，不然会接受不到数据。可以通过延迟emit的生命周期或使用this.$nextTick(()=>this.$bus.#emit)

父子双向同步

1. 父绑定数据
2. 父传入子，子绑定数据（实现父变子变）
3. 子触发input，传出自定义事件input以及输入框的值
4. 父监听input事件，将传来的值赋给绑定的值（实现子变父变）

<custom-input v-model="searchText"></custom-input>
// 等同于
<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

注意：在单选框、复选框等类型的输入控件中可能会将value属性用于不同的目的，因此使用model选项来避免这样的冲突。

// 父组件
<base-checkbox v-model="lovingVue"></base-checkbox>
// 子组件
Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

lovingVue的值将会传入名为checked的prop

.sync

//父组件给子组件传入一个函数
 <MyFooter :age="age" @setAge="(res)=> age = res">
 </MyFooter>
 //子组件通过调用这个函数来实现修改父组件的状态。
 mounted () {
      console.log(this.$emit('setAge',1234567));
 }
// 其实就是v-model的实现

我们优化一下

//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="age">
</MyFooter>
//子组件触发事件
 mounted () {
    console.log(this.$emit('update:age',1234567));
 }
// 子传父的时候触发update:属性,新值
// 父组件直接属性.sync接受

sync修饰符在一个组件中可以多次使用，但在vue2中v-model只能使用一次