关于vue中 $emit的用法详解
程序员文章站
2022-05-21 21:17:36
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
vm.$emit( event, arg ) //...
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn;
例如:子组件:
<template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div> </template> <script> export default { name:'traincity', methods:{ select(val) { let data = { cityname: val }; this.$emit('showcityname',data);//select事件触发后,自动触发showcityname事件 } } } </script>
父组件:
<template> <traincity @showcityname="updatecity" :index="goortocity"></traincity> //监听子组件的showcityname事件。 <template> <script> export default { name:'index', data () { return { tocity:"北京" } } methods:{ updatecity(data){//触发子组件城市选择-选择城市的事件 this.tocity = data.cityname;//改变了父组件的值 console.log('tocity:'+this.tocity) } } } </script>
结果为:
tocity: 大连
总结
以上所述是小编给大家介绍的关于vue中 $emit的用法详解,希望对大家有所帮助
下一篇: Android自定义View实现弹幕效果