首页 > 其他 > 详细

vue---vue2.x中父组件事件触发子组件事件

时间:2018-09-16 20:46:50      阅读:272      评论:0      收藏:0      [点我收藏+]

想要用父组件的事件触发子组件  第一件事情是先找到子组件,有了子组件才能找到想要调用子组件的方法名

一:找到子元素的方法:

  1.$children : 返回是个数组,可以自己输出看一下   例子:

 

//调用第一个子组件的bianji1方法
this.$children[0].bianji1();    

  2.$ref:

 

HTML: 要在标签中写入ref
<allFuncsEdit ref="allFuncsEdit"></allFuncsEdit >
this.$refs.allFuncsEdit;

 

二:父组件的事件

HTML:

<allFuncsEdit ref="allFuncsEdit" ></allFuncsEdit>

父组件事件:四中方法 参数可有可无

bianjiaClick(){
   this.$children[0].bianji(‘参数‘);
   this.$children[0].$emit(bianji,‘参数‘);
   this.$refs.allFuncsEdit.bianji(‘参数‘)
   this.$refs.allFuncsEdit.$emit(‘bianji‘,‘传参‘);
}

子组件事件

mounted () {
  this.$on(‘bianji‘,(val)=>{
      this.bianji(val);
  });
},
methods:{
  bianji(val){
     if(val===‘‘){
          console.log(‘父组件点击事件调用子组件的方法‘)
     }else{
          console.log(val)
     }
  } 
},

 

vue---vue2.x中父组件事件触发子组件事件

原文:https://www.cnblogs.com/BSY-725/p/9657086.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!