vue中.sync修饰符
时间: 2023-11-20 17:09:21 浏览: 43
在 Vue 中,.sync 是一个语法糖,它能够简化父子组件之间的数据传递。.sync 修饰符实际上是一个双向绑定的简写形式,它会自动创建一个名为 update:propName 的自定义事件,并且在父组件中监听这个事件,然后更新子组件的数据。
例如,在父组件中使用子组件时,可以通过 v-bind.sync 修饰符将父组件的数据与子组件的数据绑定在一起:
```
<template>
<ChildComponent :message.sync="messageFromParent"></ChildComponent>
</template>
```
这里的 .sync 修饰符会自动将子组件的 message 属性与父组件的 messageFromParent 属性进行双向绑定,并且在父组件中监听名为 update:message 的自定义事件,以更新父组件的数据。
```
<template>
<ChildComponent :message.sync="messageFromParent"></ChildComponent>
<button @click="updateMessage">Update Message</button>
</template>
<script>
export default {
data() {
return {
messageFromParent: 'Hello World'
}
},
methods: {
updateMessage() {
this.messageFromParent = 'Hello Vue'
}
}
}
</script>
```
在子组件中,可以通过 $emit() 方法触发 update:message 事件,以更新父组件的数据。
```
<template>
<div>
<input type="text" v-model="message">
<button @click="$emit('update:message', message)">Update Message</button>
</div>
</template>
<script>
export default {
props: {
message: {
type: String
}
}
}
</script>
```
这样,父组件和子组件之间就可以通过 .sync 修饰符实现双向数据绑定了。