返回旧版| 微信建站| 我要建站 | 建站学习 | 加入收藏
vue教程当前位置:首页 > cms教程 > 前端框架 > vue教程 > 正文

vue中 关于$emit的用法

发布时间:2020-09-05 09:35:42   来源:   点击:
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。

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

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

例如:子组件:
  1. <template> 
  2.   <div class="train-city"
  3.     <h3>父组件传给子组件的toCity:{{sendData}}</h3> 
  4.     <br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button> 
  5.   </div> 
  6. </template> 
  7. <script> 
  8.   export default { 
  9.     name:'trainCity'
  10.     props:['sendData'], // 用来接收父组件传给子组件的数据 
  11.     methods:{ 
  12.       select(val) { 
  13.         let data = { 
  14.           cityname: val 
  15.         }; 
  16.         this.$emit('showCityName',data);//select事件触发后,自动触发showCityName事件 
  17.       } 
  18.     } 
  19.   } 
  20. </script> 

父组件:
  1. <template> 
  2.     <div> 
  3.         <div>父组件的toCity{{toCity}}</div> 
  4.         <train-city @showCityName="updateCity" :sendData="toCity"></train-city> 
  5.     </div> 
  6. <template> 
  7. <script> 
  8.   import TrainCity from "./train-city"
  9.   export default { 
  10.     name:'index'
  11.     components: {TrainCity}, 
  12.     data () { 
  13.       return { 
  14.         toCity:"北京" 
  15.       } 
  16.     }, 
  17.     methods:{ 
  18.       updateCity(data){//触发子组件城市选择-选择城市的事件 
  19.         this.toCity = data.cityname;//改变了父组件的值 
  20.         console.log('toCity:'+this.toCity) 
  21.       } 
  22.     } 
  23.   } 
  24. </script> 


版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814