vue中的$emit和 .sync修饰符（update:xxx）

子组件可以使用 $emit 触发父组件的自定义事件。
子组件：

<template>
  <div class="train-city">
    <button @click=‘select()‘></button>
</template>
<script>
  export default {
    props:[‘sendData‘], // 用来接收父组件传给子组件的数据
    methods:{
      select(val) {
        this.$emit(‘change‘,1);//select事件触发后，自动触发父组件change事件
      }
    }
  }
</script>

父组件：

<template>
    <div>
        <div>父组件的toCity{{toCity}}</div>
        <aa @change="update" :sendData="name"></aa>
    </div>
<template>
<script>
  import aa from "./aa.vue";
  export default {
    data () {
      return {
        name:"北京"
      }
    },
    methods:{
      update(data){//触发子组件
        this.name = data.name;//改变了父组件的值
      }
    }
  }
</script>

.sync修饰符
通过与$emit联合使用，子组件可以修改父组件中用.sync修饰的值
父组件：

<comp :myMessage.sync="bar"></comp>

子组件：

this.$emit(‘update:myMessage‘,valc);

vue中的$emit和 .sync修饰符（update:xxx）

原文：https://www.cnblogs.com/bangeshiyiren/p/14343025.html