关于: .sync修饰符

.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属性更新时,视图也会自动更新
相关推荐
Codigger官方几秒前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
90后的晨仔2 分钟前
🌟 Vue3 + Element Plus 表格开发实战:从数据映射到 UI 优化的五大技巧
前端
ObjectX前端实验室1 小时前
【图形编辑器架构】🧠 Figma 风格智能选择工具实现原理【猜测】
前端·react.js
天桥下的卖艺者1 小时前
R语言基于shiny开发随机森林预测模型交互式 Web 应用程序(应用程序)
前端·随机森林·r语言·shiny
技术钱1 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json
路很长OoO1 小时前
Flutter 插件开发实战:桥接原生 SDK
前端·flutter·harmonyos
开水好喝2 小时前
Code Coverage Part I
前端
DoraBigHead2 小时前
🧭 React 理念:让时间屈服于 UI —— 从同步到可中断的演化之路
前端·javascript·面试
敢敢J的憨憨L2 小时前
GPTL(General Purpose Timing Library)使用教程
java·服务器·前端·c++·轻量级计时工具库
喝拿铁写前端3 小时前
Vue 组件通信的两种世界观:`.sync` 与普通 `props` 到底有什么不同?
前端·vue.js·前端框架