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

Posted 2021-01-06 bsy-725

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

一：找到子元素的方法：

　　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)
     }
  ｝ 
},