深入了解Vue的修饰符.sync

Vue的修饰符中，有三个重点的修饰符，它们分别为.stop .prevent .sync,下面将解析.sync

sync是什么？

一个自动更新父组件属性的 v-on 监听器

查看官方文档 cn.vuejs.org/v2/guide/co…

为什么情况要用sync?

组件之间的数据通信。

组件之间通信，我们使用props，接收外组件的传递的参数，但是Vue规定：组件不能修改props外部数据，所以当想要修改外数据，就必须要通知外组件修改值。这种场景，我们会想到eventBus, emit触发事件，on绑定监听事件的结果.

Vue其实底层是继承了eventBus 它提供了两个api

this.$emit可以触发事件
$event可以获取$emit的参数

例子

下面我通过一个例子，来让读者更深入了解sync的应用

需求：我的游戏外挂的子组件：Child,游戏终端在main.js定义，我在子组件修改为无限金币

Child.vue的代码

<template>
    <div id="child">
        我是外挂，点击按钮修改游戏币,
        <button v-on:click="change">无限金币</button>

    </div>
</template>

<script>
    export default {
        name: "Child",
        data(){
            return {

            }
        },
        props:['money'],
        methods:{
            change(){
                this.$emit('update:money',999999)
            }
        }

    }
</script>
<style scoped>
    #child{
        border: 1px solid red;
    }

</style>

main.js代码

const Vue=window.Vue
//完整版Vue
import Child  from "./components/Child"
new Vue({
  el:'#app',
  data:{

    money:1000,
  },
  components:{
    Child:Child
  }
  ,
  methods:{

  },
  template:`
    <div>
      金币:{{money}}
      <Child :money="money"  v-on:update:money="money=$event"></Child>
  <!--    <Child :money.sync="money" ></Child> -->
      
    </div>
  
  `
})

这样就可以实现修改游戏终端的金币了,代码中 <Child :money="money" v-on:update:money="money=$event"></Child>其实可以替换成

<Child :money.sync="money" ></Child>

这样可以达到相同的效果.sync其实是一个语法糖，就是方便前端开发