Vue中子组件向父组件传值以及.sync修饰符详析
明天也要努力 人气:0- 传送门：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>
点击按钮后 效果
总结
加载全部内容