.sync修饰符用于简化父组件与子组件之间双向绑定的语法。通过使用.sync修饰符,可以将子组件中对父组件属性的修改直接同步到父组件中,而无需显式地在子组件中触发事件来更新父组件的属性。.sync修饰符的作用是使双向绑定在父子组件之间更加直观和简洁。
父组件:
bash
<progressVue :visible.sync="show" :type="operationType" />
一、子组件:通过js 改变传值的处理
bash
props: {
visible: {
type: Boolean,
default: false
},
}
computed: {
show: { // 重新计算属性--
get() {
return this.visible
},
set(val) { // 注意更新的是 props 的值
this.$emit('update:visible', val)
}
},
},
// 操作 this.show = false
// 那么 visible 更新值也是 false
参考: https://vuejs.zcopy.site/v2/guide/components-custom-events#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
二、子组件:直接输入改变传值
bash
// 父组件
<ChildComponent :value.sync="inputValue" />
// 子组件
<input :value="value" @input="$emit('update:value', $event.target.value)" />
proxy实现双向绑定
在JavaScript中,双向绑定通常是通过观察和同步数据模型与视图的变化来实现的。如果你想要实现一个简单的双向绑定,你可以创建一个简单的代理(proxy)来包装这种行为。
以下是一个简单的例子,展示了如何使用Proxy来实现双向绑定:
bash
function bind(target, callback) {
const handler = {
get(obj, prop) {
return obj[prop];
},
set(obj, prop, value) {
obj[prop] = value;
callback();
return true;
}
};
return new Proxy(target, handler);
}
// 使用示例
const data = {
text: ''
};
const proxyData = bind(data, () => {
console.log('数据已更新:', proxyData.text);
});
// 当设置proxyData的属性时,callback函数会被调用,输出更新的值
proxyData.text = 'Hello, world!'; // 输出: 数据已更新: Hello, world!
// 你也可以使用这个proxyData来绑定到视图,每次text属性更新时,视图也会自动更新