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);


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM