码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-09-16 20:57:51      阅读:344      评论:0      收藏:0      [点我收藏+]

标签:第一个   this   返回   一个   点击   UNC   weight   fun   col   

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

一:找到子元素的方法:

  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中父组件事件触发子组件事件

标签:第一个   this   返回   一个   点击   UNC   weight   fun   col   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!