.sync 修饰符

作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器

<template>
  <div class="app">
    App.vue 我现在有 {{ total }}
    <hr />
       <Child :money.sync="total">
    // 扩展成下面的语法，.sync只是一个语法糖
    // <Child :money="total" v-on:update:money="total = $event" />
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  components: { Child: Child },
  data() {
    return { total: 10000 };
  },
  
};
</script>

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

*
<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"]
};
</script>


<style>
.child {
  border: 3px solid green;
}
</style>

.$emit

vm.$emit(event, arg)    //$emit绑定一个自定义事件event ,当该语句被执行到的时候，会将参数arg抛出传递给父组件，父组件通过@event监听并接收参数，然后可通过$event访问到子组件抛出的arg参数；

**假如在父组件中事件处理函数是一个方法，则arg代表的值会作为第一个参数传入这个方法

// 子组件
  <template>
     <div  class="train-city">
         <h3>父组件传给子组件的toCity:{{sendData}}</h3>
 <br/><button v-on:click="select('山东')">点击此处将“山东”发送给父组件</button>
     </div>
 </template>
<script>
   export default{
         name: 'trainCity',
         props: ['sendData'],        //用来接收父组件传给子组件的 数据
         methods:{
                 select(val){
                       let data={
                             cityname: val
                           };
                       this.$emit("showCityName",  data);    //select事件触发以后，自动触发showCityName事件
                     }
                 }
           }
</script>

// 父组件
<template>
 <div>
   <div>父组件的toCity{{toCity}}</div>
   <train-city v-on:showCityName="updateCity"  v-bind:sendData="toCity"></train-city>   //使用子组件    prop动态传递数据   事件处理函数是一个方法，自动接收子组件传过来的arg并传给函数作为第一个参数，虽然没有用$event接收子组件传过来的值
 </div>
</template>

<script>
 import  trainCity from "./train-city";
 export default{
   name: "index",
   components:{trainCity},
   data(){
           return{
               toCity: 'beijing'
           }
       },
   methods:{
       updateCity(){        //触发子组件
             this.toCity = data.cityname;     //改变了父组件的值
           console.log("toCity:"  + this.toCity)
           }
   }
}
</script>

vue中 .sync修饰符的作用

.sync 修饰符

.$emit