传送门：Vue中 状态管理器（vuex）详解及应用场景
传送门：Vue中 $ attrs、$ listeners 详解及使用
传送门：Vue中 事件总线（eventBus）详解及使用
传送门：Vue中 provide、inject 详解及使用
Vue中 常见的组件通信方式可分为三类
- 父子通信
父向子传递数据是通过 props，子向父是通过 events（$emit）； 通过父链 / 子链也可以通信（$parent / $children）； ref 也可以访问组件实例； provide / inject； $attrs/$listeners；
- 兄弟通信
Bus； Vuex；
- 跨级通信
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 操作符的时候子组件 emit 必须是 ‘update:xxx’ 名字)：
<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>
点击按钮后 效果
