首页 > 其他 > 详细

vue中的$emit和 .sync修饰符(update:xxx)

时间:2021-01-29 09:47:47      阅读:47      评论:0      收藏:0      [点我收藏+]

子组件可以使用 $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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!