java中emit的用法_vue中 关于$emit的用法

1、父组件可以使用 props 把数据传给子组件。

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

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

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

例如：子组件：

父组件传给子组件的toCity:{{sendData}}

点击此处将‘大连’发射给父组件

export default {

name:'trainCity',

props:['sendData'], // 用来接收父组件传给子组件的数据

methods:{

select(val) {

let data = {

cityname: val

};

this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件

}

}

}

父组件：

父组件的toCity{{toCity}}

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)

}

}

}

图一：点击之前的数据

图二：点击之后的数据

---------------------

作者：darkblueLove

来源：CSDN

原文：https://blog.csdn.net/sllailcp/article/details/78595077

版权声明：本文为博主原创文章，转载请附上博文链接！