Document
  

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);
posted @ 2021-01-29 08:41  半个失忆人  阅读(1339)  评论(0)    收藏  举报