从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器。
这是目前vue最新版文档描述,子组件修改父组件状态的方法。
包括两部分代码填充:
- 父组件
<comp :foo="bar" @update:foo="val => bar = val"></comp>
- 子组件:
this.$emit('update:foo', newValue)
实例中如下:
child.vue
<template>
<div @click='change'>{{number}}</div>
</template>
<script>
export default{
props:['number'],
methods:{
change(){
let newNumber=number?0:1;
this.$emit('update:number',newNumber);
}
]
}
</script>
father.vue
<temlate>
<div>
<v-child :number='faterNumber' @update:number='val=>fatherNumber=val'></v-child>
<p>{{faterNumber}}</p>
</div>
</template>
<script>
import v-child from './child';
export default{
data(){
return{
fatherNumber:1
}
},
components:{v-child}
}
</script>
子组件中的div点击触发change事件,通过this.$emit进行触发父组件的状态更改,这样number便在0与1之间切换