vue里面三方组件执行顺序方法(在主组件中点击子组件,执行调用出功能组件)

1.组件a (主组件显示页面)

代码如下:(html运用了jade模板方式)

.boxes
      Message(:data='messdata')
        div(slot='content').set.nodrag
          .leftnav
            ul
              li(v-for='(item,index) in setlist',@click='tab(item.component,index)',:class='index===selectind?"tabselect":""')
                span {{item.des}}
          .rightnav
            .centebox.scrollbar
              //-子组件显示区域 并使用v-on传输过来俩个方法,取名执行
              component(:is='tabView' v-on:refreshbizlines="Browserprotection" v-on:refreshbizlanj="Installinterceptor")
    //-功能组件1  使用ref来执行传输过来的方法
    Browserprotection(ref="childBrowser")         
    //-功能组件2
    Installinter(ref="childInstall")

2.组件b (子组件的页面)    强调需求:需要点击子组件里面的按钮,执行调出功能组件!

html代码:

.box_first
      i.str 
        Lswitch(v-model='infomation.settinginfo.installfound',@on-change='installfound')
      a.dles(@click="lanj(infomation.settinginfo.installfound)") 功能1点击事件按钮
    .box_first(style='border:none;')
      i 
      a.dles(@click='dle()')  功能2点击事件按钮

js代码:

 lanj(blen) {
    let insblen;
    if(blen){
      insblen = true;
    }else{
      insblen = false;
    }
    this.$emit('refreshbizlanj', insblen);//执行父级方法!也就是吧这个事件传输给组件a
  }
  dle(itemId) {
    this.$emit('refreshbizlines', itemId);//执行父级方法!也就是吧这个事件传输给组件a
  }

3.组件a里面写这俩个被传输过来方法执行的函数方法:

js代码:

//功能1方法
    Browserprotection(itemId) {
          this.$refs.childBrowser.parentMsgInstall(true);
    },
    //功能2方法
    Installinterceptor(blen) {
      this.$refs.childInstall.parentMsg(true, blen);
    },

注意:虽然执行了这俩个方法,但是最根本的是这俩个方法里面执行的这行代码:

this.$refs.childBrowser.parentMsgInstall(true);和this.$refs.childInstall.parentMsg(true, blen);

4.这里的俩方法里面的代码其实才是真正执行的是俩个功能组件里面的函数方法:

功能组件1:

js代码:

 parentMsgInstall(blen) {
    this.modaldatabrowser.visible = blen;
    this.getPageList();
    this.getLockedPage('getLockedPageIeEdge',0);
    this.getLockedPage('getLockedPageOther',1);
  }

注意:最终需要执行的是这个方法!而在组件a中调用这个组件的时候,也吧这个事件通过ref给传过去了!!!!

//-功能组件1  使用ref来执行传输过来的方法
    Browserprotection(ref="childBrowser") 

看不明白的同学可以留言询问,谢谢!项目代码截取一部分见谅!

你可能感兴趣的:(vue里面三方组件执行顺序方法(在主组件中点击子组件,执行调用出功能组件))