[Vue].sync修饰符

.sync修饰符：

注意：该修饰符在 Vue3.0 版本中已经取消了，被替换成了 v-model 。

1、简介：

在一般情况下，当父组件给子组件传递一个自定义属性后，例如传递的自定义属性是一个字符串，那么我们在子组件中是不可以直接进行修改的，如果修改的话，就会报错。

但是我们可以在父组件中为这个子组件的实例上绑定一个自定义事件，当子组件触发该自定义事件时，在去修改父组件中的数据，从而达到想要的效果。

当我们使用 .sync 修饰符时，就相当于为被传递的自定义属性值，添加了一个双向绑定，从而就可以在子组件中，去直接修改父组件中的数据。

---

2、未使用 .sync 修饰符修改父组件数据：

• 顺序：

  • 首先在父组件中，为子组件传递数据，以及绑定自定义事件（changeText）。

  • 然后点击子组件中的按钮，触发自身实例上的自定义事件，从而修改父元素数据。

• 页面：

  • 在父组件中，为子组件传递数据，以及绑定自定义事件。

  • 在 changeText 事件中，$event 的值是 $emit() 触发事件时传递的值，然后这个值，就赋值给 data 中的 text 了，从而达到了子给父传值的效果。

<div id="app">
  <test :prop-text='text' @changeText='text = $event'></test>
</div>

• 子组件：
  • 接收父组件传递的自定义属性，在点击按钮时，触发 changeText 事件，并携带值。

let test = {
  template: `
    <div>
      <p>{{propText}}</p>
      <button @click='changeText'>修改propText</button>    
    </div>`,
   props: ["propText"],
   methods: {
     changeText(){
       this.$emit("propText", "text的值被子组件修改咯!~");
     }
   }
}

• 父组件：
  • 注册子组件。

const vm = new Vue({
  el: "#app",
  data: { text: "我现在展示的是App组件的内容~" },
  components: { test },
});

---

3、使用 .sync 修饰符修改父组件数据 - 传递字符串：

• 页面：

  • 对比第2行代码：

    • 在 :prop-text 后添加了 .sync 修饰符。

    • 并且将绑定的自定义事件删除了。

<div id="app">
  <test :prop-text.sync='text'></test>
</div>

• 子组件：

  • 对比第10行代码，触发的事件名需要写成以下格式，其中update:是固定的。

    • update:在props中接收的属性名

  • 当触发该事件时，就会去寻找组件自身实例上prop-text属性绑定的值，然后去修改它。

let test = {
  template: `
    <div>
      <p>{{propText}}</p>
      <button @click='changeText'>修改propText</button>    
    </div>`,
   props: ["propText"],
   methods: {
     changeText(){
       this.$emit("update:propText", "text的值被子组件修改咯!~");
     }
   }
}

• 父组件：

const vm = new Vue({
  el: "#app",
  data: { text: "我现在展示的是App组件的内容~" },
  components: { test },
});