vue的.sync怎么使用
时间: 2024-05-03 10:21:07 浏览: 10
可以使用`.sync`修饰符将子组件与父组件的数据进行双向绑定。具体使用方法如下:
在父组件中将子组件的数据绑定到父组件的一个变量上,并在子组件中触发一个事件将变量的值传递给父组件,从而实现双向绑定。
父组件:
```
<template>
<div>
<child-component :name.sync="childName"></child-component>
</div>
</template>
<script>
export default {
data() {
return {
childName: '',
}
},
components: {
'child-component': {
props: ['name'],
template: `
<div>
<input v-model="localName">
<button @click="$emit('update:name', localName)">传递数据</button>
</div>
`,
data() {
return {
localName: '',
}
},
},
},
}
</script>
```
子组件:
```
<template>
<div>
<input v-model="localName">
<button @click="$emit('update:name', localName)">传递数据</button>
</div>
</template>
<script>
export default {
props: ['name'],
data() {
return {
localName: '',
}
},
watch: {
name(newVal) {
this.localName = newVal
},
},
}
</script>
```
这样父组件中的`childName`变量就与子组件中的`name`变量实现了双向绑定。在子组件中修改`localName`的值时,通过`$emit`触发了`update:name`事件,将`localName`的值传递给父组件。在父组件中修改`childName`的值时,会自动同步更新子组件的`name`变量。