vue中:visible.sync
时间: 2024-05-09 14:15:57 浏览: 10
`visible.sync` 是 Vue.js 中的一个修饰符,它通常用于自定义组件的双向绑定。在一个自定义组件中,我们可以通过 `props` 属性传递一个值给组件,但如果我们希望在组件内部修改这个值,并且这个修改也要反映到父组件中,就需要使用 `.sync` 修饰符。
例如,一个组件 `MyComponent` 中有一个 `visible` 的属性,我们希望在组件内部修改这个属性并且同步到父组件中,可以这样写:
```
<template>
<div>
<button @click="toggleVisible">Toggle visibility</button>
<div v-if="visible">
This is visible content.
</div>
</div>
</template>
<script>
export default {
props: {
visible: Boolean
},
methods: {
toggleVisible() {
// 修改 visible 属性的值
this.$emit('update:visible', !this.visible);
}
}
};
</script>
```
在父组件中使用 `MyComponent` 组件时,我们可以把 `visible` 属性传递给它,并且使用 `.sync` 修饰符来实现双向绑定:
```
<template>
<div>
<my-component :visible.sync="isVisible" />
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
},
data() {
return {
isVisible: false
};
}
};
</script>
```
这样,在父组件中修改 `isVisible` 的值,也会同步到 `MyComponent` 中的 `visible` 属性。