vue 中 sync修饰符的用法
父组件传递值给子组件时 在其绑定的变量后加上 :变量 .sync='xxx' , 当在子组件中需要改变这个父组件中的值的时候 使用 $emit( 'update: 变量', 值 ), 这样可以省略一步在父组件中的接受函数
常规写法:
父组件中
```
<myComponent :show='valueChild' @changeShow="accept"
</myComponent>
data(){
return{
valueChild: true,
}
},
methods: {
accept( data ) {
this.valueChild = data ; // 接收子组件传递回来的值 并改变原有值
}
}
```
子组件中
<template>
<button @click ="closeDiv">关闭</button>
</template>
props:['show'],
methods: {
closeDiv() {
this.$emit('changeShow', false); // 发射新值到父组件
}
}
sync修饰符写法:
父组件中
<myComponent :show.sync='valueChild' ></myComponent>
子组件中
<template>
<button @click="closeDiv">关闭</button>
</template>
props:['show'],
methods: {
closeDiv() {
this.$emit('update:show', false); //触发 input 事件,并传入新值
}
}