Vue中常见的组件通信方式可分为三类

父子通信

父向子传递数据是通过 props，子向父是通过 events（$emit）；
通过父链 / 子链也可以通信（$parent / $children）；
ref 也可以访问组件实例；
provide / inject；
$attrs/$listeners；

兄弟通信

父向子传递数据是通过 props，子向父是通过 events（$emit）；
通过父链 / 子链也可以通信（$parent / $children）；
ref 也可以访问组件实例；
provide / inject；
$attrs/$listeners；

跨级通信

Bus；
Vuex；
provide / inject、
$attrs / $listeners、

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

1. 之前的写法

子组件中可以通过 $emit 向父组件通信，通过这种间接的方式改变父组件的 data，从而实现改变子组件 props 的值

父组件

<template>
 <div>
    <Child 
      :title="childTitle" @changeTitle="CTitle" 
      :subTitle="childSubTitle" @update:subTitle="val => childSubTitle = val">
   </Child>
 </div>
</template>
 
<script>
import Child from './child.vue'
export default {
  data() { 
    return {
      childTitle:'hello world',
      childSubTitle:'你好',
    } 
  }, 
  components:{
    Child
  },
  methods: {
   CTitle(msg){
      this.childTitle = msg;
   },
  },  
}
</script>

子组件

<template>
  <div class="child">
    <h2>{{title}}</h2>
    <h4>{{subTitle}}</h4>
    <button @click="changeTitle">改变英文标题</button>
    <button @click="changeSubTitle">改变中文标题</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTitle:'Vue',
      newSubTitle:'明天也要努力'
    };
  },
  props: {
    title:{
      type:String,
      default:'',
    },
    subTitle:{
      type:String,
      default:'',    
    }
  },
  methods:{
    changeTitle(){
      this.$emit('changeTitle',this.newTitle)
    },
    changeSubTitle(){
      this.$emit('update:subTitle',this.newSubTitle)
    },
  },
};
</script>

2. .sync 修饰符

为了方便这种写法，vue 提供了.sync 修饰符，说白了就是一种简写的方式，我们可以将其当作是一种语法糖，比如 v-on: click 可以简写为 @click。
而上边父组件的这种写法，换成 sync 的方式就像下边这样：

父组件

<template>
 <div>
   <h1>父组件：{{childSubTitle}}</h1>
   <Child :subTitle.sync="childSubTitle"></Child>
 </div>
</template>
 
<script>
import Child from './child.vue'
export default {
  data() { 
    return {
      childSubTitle:'你好',
    } 
  }, 
  components:{
    Child
  }, 
}
</script>

子组件

<template>
  <div class="child">
    <h4>{{subTitle}}</h4>
    <button @click="changeSubTitle">改变中文标题</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newSubTitle:'明天也要努力'
    };
  },
  props: {
    subTitle:{
      type:String,
      default:'',    
    }
  },
  methods:{
    changeSubTitle(){
      this.$emit('update:subTitle',this.newSubTitle)
    },
  },
};
</script>

总结：
父组件将 message 的值传给子组件的，子组件中触发事件 update:xxx 需要修改父组件的 message，就可以用 .sync 修饰符简化( sync 操作符的时候

<child-cop :xxx.sync="message"></child-cop>

.sync 修饰符其实就是将上述代码转换成

<child-cop :xxx="message" @update:xxx="message = $event"></child-cop>

注意

在这里插入图片描述

父组件

<template>
 <div>
   <h1>父组件：{{doc.title}}--{{doc.content}}</h1>
   <Child v-bind.sync="doc"></Child>
 </div>
</template>
 
<script>
import Child from './child.vue'
export default {
  data() { 
    return {
      doc:{
         title:'前端',
         content:'Vue',
      },
    } 
  }, 
  components:{
    Child
  },
}
</script>

子组件

<template>
  <div class="child">
    <h4>{{title}}--{{content}}</h4>
    <button @click="change">改变</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTitle:'明天也要努力'
    };
  },
  props: {
    title:{
      type:String,
      default:'',    
    },
    content:{
      type:String,
      default:'',    
    }
  },
  methods:{
    change(){
      this.$emit('update:title',this.newTitle);
      this.$emit('update:content','Vue中 子组件向父组件传值 及 .sync 修饰符 详解');
    },
  },
};
</script>

在这里插入图片描述

.sync是一个修饰符，是2.3.0+ 新增的，官网的解释：在有些情况下，我们可能需要对一个 prop 进行"双向绑定"。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。

简单来说.sync的意思是当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定，其实这个用法跟某个指令很相似，v-model？对，就是v-model在组件上使用的时候。

.sync和v-model的区别

相同点：

都是语法糖，都可以实现父子组件数据的双向绑定，原理都是在绑定的元素身上添加一个事件和对应的值

原理：

1.sync：

.sync 等价于我们在监听 num的同时监听updata的事件把回传数据的同时修改num的值

// 正常父传子： 
<com1 :a="num" :b="num2"></com1>
 
// 加上sync之后父传子： 
<com1 :a.sync="num" .b.sync="num2"></com1> 
 
// 它等价于
<com1 
  :a="num" @update:a="val=>num=val"
  :b="num2" @update:b="val=>num2=val"></com1> 
 
// 相当于多了一个事件监听，事件名是update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。

2.v-model：

v-model 等价于监听一个 value属性和一个input事件 !

<com1 v-model="num"></com1>
   等价于
<com1 :value="num" @input="(val)=>this.num=val"></com1>

区别：

1. v-model 默认对应的是input或者textarea等组件的input事件，如果在子组件替换这个input事件，其本质和.sync修饰符一模一样。

2. 一个组件可以多个属性用.sync修饰符，可以同时"双向绑定多个“prop”，而并不像v-model那样，一个组件只能有一个。

3 v-model比较有局限性，绑定的属性名只能叫value，而.sync可以任意取名，如果你希望只传value值的话，可以使用v-model，反之，使用.sync

参考链接1: blog.csdn.net/ZYS10000/ar…

参考链接2: blog.csdn.net/weixin_4395…

参考链接3: zhuanlan.zhihu.com/p/422534106

Vue中 .sync 修饰符和v-model

Vue中 常见的组件通信方式可分为三类