.sync修饰符

我不是女神ヾ 2022-11-22 05:10 162阅读 0赞

### **第一步：先用一句话解释** ###

.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

### **第二步：具体解释** ###

一般情况下，想要实现父子组件间值的传递，通常使用的是 `props` 和自定义事件 `$emit` 。  
其中，父组件通过 `props` 将值传给子组件，子组件再通过 `$emit` 将值传给父组件，父组件通过事件j监听获取子组件传过来的值。  
如果想要简化这里的代码，可以使用.sync修饰符，实际上就是一个**语法糖**。

### **第三步：举一个例子来说明** ###

*  Father.vue

<template>
      <div class="app">
         {
       {dataApp}}
        <hr>
        <Child :money.sync="dataApp"/>
        // <Child :money="dataApp" v-on:update:money="dataApp = $event"/>  //两句作用等同
      </div>
    </template>
    
    <script>
    import Child from "./Child.vue";
    export default {
      data() {
        return { dataApp: 10000 };
      },
      components: { Child }
    };
    </script>

*  Child.vue

<template>
      <div class="child">
        {
       {money}}
        <button @click="$emit('update:money', money-100)">
        </button>
      </div>
    </template>
    
    <script>
    export default {
      props: ["money"]
    };
    </script>

上面例子中，父组件传了一个参数 `money` 给子组件，子组件通过`$emit`修改 `money` 后，将值同步到父组件。  
这里 `<Child :money="dataApp" v-on:update:money="dataApp = $event"/>` 就相当于 `<Child :money.sync="dataApp"/>` 。

## **小结** ##

以上是我的一些学习思路和总结，深入学习可以参考**[Vue文档][Vue]**里的相关介绍，欢迎大家和我多多交流，如有错误烦请指正~~~

[Vue]: https://link.zhihu.com/?target=https%3A//cn.vuejs.org/v2/guide/components-custom-events.html%23sync-%25E4%25BF%25AE%25E9%25A5%25B0%25E7%25AC%25A6