v-bind.sync
- 在子组件中我们不能直接修改父组件传过来的prop值,一般情况下通过$emit传递事件,然后在父组件中监听这个事件,再在事件中修改这个prop值。v-bind.sync可以理解为是这种方式的语法糖。
- 在父组件v-bind.sync可以实现props的双向绑定
- v-bind.sync与v-model的区别?
-
一个组件可以多个属性用.sync修饰符,可以同时"双向绑定多个“prop”,而并不像v-model那样,一个组件只能有一个。
-
v-model针对更多的是最终操作结果,是双向绑定的结果,是value,是一种change操作。
-
v-bind.sync针对更多的是各种各样的状态,是状态的互相传递,是status,是一种update操作。
父组件
<template>
<div>
<comp2 v-bind.sync="propsObj"></comp2>
</div>
</template>
<script>
// import comp from './comp.vue'
import comp2 from './comp2.vue'
export default {
name: 'Class2',
props: {},
components: { comp2 },
watch: {
// searchText(old,newValue) {
// console.log(this.searchText);
// console.log(old,newValue);
// }
},
data() {
return {
propsObj: {
title:'一个标题',
name: 'wang'
}
}
}
}
</script>
子组件
<template>
<div>
<h1 @click="handleClick">父组件传来的标题: {{title}}</h1>
<h1 @click="changeName">{{name}}</h1>
</div>
</template>
<script>
// import comp
export default {
name: 'Comp2',
props: {
// propsObj 对象里的属性分开写
title: String,
name: String
},
components: {},
data() {
return {
// value: ''
};
},
computed: {
},
methods: {
handleClick(e) {
this.$emit('update:title', '新标题')
// this.$emit('click', '新标题')
},
changeName() {
this.$emit('update:name', '新的名字')
}
},
}
</script>
点击触发事件后