vue里面三方组件执行顺序方法（在主组件中点击子组件，执行调用出功能组件）

最新推荐文章于 2024-08-15 16:11:23 发布

we_前端全家桶

最新推荐文章于 2024-08-15 16:11:23 发布

阅读量2.7k

点赞数

文章标签： vue vue组件 vue父子组件调用组件三方传输事件 vue组件事件传输

本文链接：https://blog.csdn.net/qq_26277237/article/details/82142887

版权

本文介绍了在Vue项目中如何实现从子组件出发，通过触发事件来调用父组件的方法，并进一步执行第三方组件的功能。具体步骤包括在主组件（组件a）中设置方法，子组件（组件b）中触发事件，以及如何通过ref在父组件中调用第三方组件（功能组件1）的方法。关键代码包括`this.$refs.childBrowser.parentMsgInstall(true)`和`this.$refs.childInstall.parentMsg(true, blen)`，这两行代码实现了事件的传递和功能的执行。" 64238206,2089339,Vulkan编程指南：物理内存与逻辑设备,"['Vulkan', '图形编程', '设备内存管理', '计算队列', '设备创建']

摘要由CSDN通过智能技术生成

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代