vue的$emit

Posted caseywei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue的$emit相关的知识,希望对你有一定的参考价值。

vue中 关于$emit的用法

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

 

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

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

 

例如:子组件:

 

[plain] view plain copy
 
  1. <template>  
  2.   <div class="train-city">  
  3.     <span @click=‘select(`大连`)‘>大连</span>  
  4.   </div>  
  5. </template>  
  6. <script>  
  7. export default {  
  8.   name:‘trainCity‘,  
  9.   methods:{  
  10.     select(val) {  
  11.       let data = {  
  12.         cityname: val  
  13.       };  
  14.       this.$emit(‘showCityName‘,data);//select事件触发后,自动触发showCityName事件  
  15.     }  
  16.   }  
  17. }  
  18. </script>  

 

父组件:

 

[plain] view plain copy
 
  1. <template>  
  2.     <trainCity @showCityName="updateCity" :index="goOrtoCity"></trainCity> //监听子组件的showCityName事件。  
  3. <template>  
  4. <script>  
  5. export default {  
  6.   name:‘index‘,  
  7.   data () {  
  8.    return {  
  9.       toCity:"北京"  
  10.     }  
  11.   }  
  12.   methods:{  
  13.     updateCity(data){//触发子组件城市选择-选择城市的事件    
  14.       this.toCity = data.cityname;//改变了父组件的值  
  15.       console.log(‘toCity:‘+this.toCity)        
  16.     }  
  17.   }  
  18. }  
  19. </script>  


 

结果为:toCity: 大连




以上是关于vue的$emit的主要内容,如果未能解决你的问题,请参考以下文章

vue2能用vue3封装的组件

vue3简介——升级Vue的版本 vue2.9.6升级到vue3.0——创建Vue3.0工程-——vue3_devtool开发者工具的下载安装

vue和vue-cli的区别与联系

vue的.vue文件是怎么run起来的(vue-loader)

vue3与vue2的比较

Vue初识Vue,Vue简介及Vue Devtools配置