Vue .sync 修饰符

·  阅读 343

概述

当子组件需要修改从父组件的接收到的数据时,必须通知父组件,子组件操作完后再把值传给父组件。如果子组件直接操作,Vue 会发出警告。可以在父组件中使用 .sync 修饰符允许子组件自行修改从父组件接收到的数据。

通俗理解:钱是父亲的,儿子接受父亲的钱,使用钱要告知父亲钱的用途,等父亲了解后,记入家庭支出账单中。如果儿子直接用钱,会被警告。通过 .sync 修饰符使得父亲允许儿子自行用钱并记入家庭支出账单中。

其中:

  • 父组件通过 props 实现向子组件的单向通信。
  • 子组件通过 $emit 实现向父组件的单向通信。

在 Vue3 中推荐使用 v-model 修饰符替代 .sync 修饰符

Vue3 文档 —— v-model

示例代码

Vue.component("child", {
  props: ["value"],
  template: `
    <div>
      <hr>
      子组件: {{value}}
      <button @click="$emit('update:value',value-1)">子组件点击 -1</button>
    </div>
  `
});
new Vue({
  el: "#app",
  data: {
    number: 100
  },
  template: `
    <div>
      父组件: {{number}}
      <child :value='number' @update:value='number=$event'></child>
    </div>
  `
});
复制代码

image.png

代码分析:

  • 在子组件中使用 $emit('update:value') 通知父组件响应,点击按钮触发事件并传递参数或表达式 number-1
    完整代码语法:@click="$emit('update:value',number-1)"

  • 在父组件中通过 @update:value='value=$event' 监听子组件 update:value 事件,并通过 $event 接收经过子组件修改后的值,最后通过 v-bind 指令 :value='number' 动态绑定。 完整代码语法::value='number' @update:value='number=$event'

.sync 用法

可以使用 .sync 修饰符对以上代码进行简化:

Vue.component("child", {
  props: ["value"],
  template: `
    <div>
      <hr>
      子组件: {{value}}
      <button @click="$emit('update:value',value-1)">子组件点击 -1</button>
    </div>
  `
});
new Vue({
  el: "#app",
  data: {
    number: 100
  },
  template: `
    <div>
      父组件: {{number}}
      // 仅修改此处
      <child :value.sync='number'></child>
    </div>
  `
});
复制代码
  • 在子组件中无需修改。
  • 在父组件中使用 :value.sync='number' 告诉子组件传递过去的 value 跟父组件上的 number 保持同步。

注意事项:

  • 带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是,你只能提供你想要绑定的 property 名,类似 v-model。
  • 注意 valuenumber 的位置。

参考资料

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改