zoukankan      html  css  js  c++  java
  • vue中 关于$emit的用法

    1、父组件可以使用 props 把数据传给子组件。
    2、子组件可以使用 $emit 触发父组件的自定义事件。

    vm.$emit( event, arg ) //触发当前实例上的事件

    vm.$on( event, fn );//监听event事件后运行 fn; 

    例如:子组件:

    <template>
    <div class="train-city">
    <h3>父组件传给子组件的toCity:{{sendData}}</h3>
    <br/><button @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 @showCityName="updateCity" :sendData="toCity"></train-city>
    </div>
    <template>
    <script>
    import TrainCity from "./train-city";
    export default {
    name:'index',
    components: {TrainCity},
    data () {
    return {
    toCity:"北京"
    }
    },
    methods:{
    updateCity(data){//触发子组件城市选择-选择城市的事件
    this.toCity = data.cityname;//改变了父组件的值
    console.log('toCity:'+this.toCity)
    }
    }
    }
    </script>
    图一:点击之前的数据

    图二:点击之后的数据


    ---------------------
    作者:darkblueLove
    来源:CSDN
    原文:https://blog.csdn.net/sllailcp/article/details/78595077
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    linux 常用命令(个人记录)
    jmeter 5.0版本更新说明(个人做个记录)
    Netdata---Linux系统性能实时监控平台部署记录
    MySQL Yum存储库 安装、升级、集群
    linux 各项配置汇总
    构建Maven项目自动下载jar包
    计算服务器的pv量算法
    性能计算公式
    jstack(查看线程)、jmap(查看内存)和jstat(性能分析)命令
    结构模式
  • 原文地址:https://www.cnblogs.com/shaozhu520/p/10637455.html
Copyright © 2011-2022 走看看