序言：我们都知道vue父子组件通信主要通过props和事件，那还知道其他形式的通讯方式吗？本文将一一为你揭晓。

1、sync修饰符+this.$emit(‘update:属性名’, data)

1.1、sync修饰符的作用

在Vue中，子父组件最常用的通信方式就是通过props进行数据传递，props值只能在父组件中更新并传递给子组件，在子组件内部，是不允许改变传递进来的props值，这样做是为了保证数据单向流通。但有时候，我们会遇到一些场景，需要在子组件内部改变props属性值并更新到父组件中，这时就需要用到.sync修饰符。

如果我们在子组件中直接修改props中的属性值，将会报以下错误：

报错的大概意思就是：不允许直接修改props里面的属性值。

这里可以参考一篇文章：https://blog.csdn.net/XuM2222…

1.2、利用sync修饰符实现双向数据绑定

父组件：通过给绑定属性添加sync修饰符将值传递给子组件，父组件值改变，子组件随着改变。
子组件：通过this.$emit(‘update:属性名’, data)来改变props属性值并更新父组件对应的值。

<template>
  <div @click="click2change">
    点击加一{{foo}}
    <my-checkbox :checked.sync="foo"></my-checkbox>
  </div>
</template>

<script>
import Vue from 'vue';
// 组件通信： props，事件，provide|inject，vuex， vuebus，。。。

const myCheckbox = Vue.component('my-checkbox', {
  props: {
    value: {
      type: String,
      default: 'testvalue'
    },
    checked: {
      type: Number,
      default: 0
    }
  },
  methods: {
    changeValue() {
      //this.checked -= 2;//会报刚刚说的错误，不能直接修改props属性值
      this.$emit("update:checked", this.checked - 2);
    }
  },
  template: `
    <div>
      <div @click.stop="changeValue">checked: {{checked}}</div>
    </div>
  `
});

export default {
  name: 'list',
  components: {
    myCheckbox,
  },
  data() {
    return {
      foo: 1
    }
  },
  methods: {
    click2change() {
      this.foo += 1;
    }
  }
}
</script>

结果运行：

2、自定义组件v-model+this.$emit(‘自定事件名’, data)

2.1、v-model语法糖

2.2、自定义组件v-model

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

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)"
    >
  `
})

现在在这个组件上使用 v-model 的时候：

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新。

注意：你仍然需要在组件的 props 选项里声明 checked 这个 prop。

2.3、使用自定义组件v-model实现双向数据绑定

父组件：通过v-model向子组件传值，并监听自定义函数更新值。
子组件：通过model选项自定义绑定属性名和方法，使用$emit触发自定义方法更新父组件的值。

<template>
  <div @click="click2change">
    点击加一{{foo}}
    <my-checkbox v-model="foo"></my-checkbox>
  </div>
</template>

<script>
import Vue from 'vue';

// 组件通信： props，事件，provide|inject，vuex， vuebus，。。。

const myCheckbox = Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    //需要在组件的 props 选项里声明 checked 这个 prop
    checked: {
      type: Number,
      default: 0
    }
  },
  methods: {
    changeValue() {
      this.$emit("change", this.checked - 1);
    }
  },
  template: `
    <div>
      <div @click.stop="changeValue">checked: {{checked}}</div>
    </div>
  `
});

export default {
  name: 'list',
  components: {
    myCheckbox,
  },
  data() {
    return {
      foo: 1
    }
  },
  methods: {
    click2change() {
      // debugger
      this.foo += 1;
    }
  }
}
</script>

运行结果：

3、value方式+this.$emit(‘input’, data)

这种方式实现双向数据绑定是基于v-model语法糖

<template>
  <div @click="click2change">
    点击加一{{foo}}
    <my-checkbox v-model="foo"></my-checkbox>
  </div>
</template>

<script>
import Vue from 'vue';

// 组件通信： props，事件，provide|inject，vuex， vuebus，。。。

const myCheckbox = Vue.component('my-checkbox', {
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  methods: {
    changeValue() {
      this.$emit("input", this.value - 1);
    }
  },
  template: `
    <div>
      <div @click.stop="changeValue">value: {{value}}</div>
    </div>
  `
});

export default {
  name: 'list',
  components: {
    myCheckbox,
  },
  data() {
    return {
      foo: 1
    }
  },
  methods: {
    click2change() {
      // debugger
      this.foo += 1;
    }
  }
}
</script>

运行结果：

4、总结

无论是上面哪种双向数据绑定的方式，基本原理还是基于props和事件，只是形式上的改变，本质没有变。