vue activated在子组件中的使用详情

 更新时间:2021年11月11日 11:09:11   作者:xiaofanku  
这篇文章主要介绍了vue activated在子组件中的使用,文章围绕vue activated的xingu你资料讲解展开内容并附上具体代码,需要的朋友可以参考一下

页面:base:

<template>
  <div class="tab-container">
    <h1 style="text-align: center">
      申请{{ form.category }}{{ form.companyType }}入驻
    </h1>
    <div class="form-panel" style="margin-left: 20px;text-align: right;">
      <el-button type="info" @click="cancelSave">取消</el-button>
      <el-button type="warning" @click="transientSave">暂存</el-button>
      <el-button type="danger" @click="persistSave">保存</el-button>
    </div>
    <el-tabs v-model="activeName" style="margin-top: 15px" type="border-card" :before-leave="collectPaneFormData" @tab-click="initPaneData">
      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
        <keep-alive>
          <tab-pane :is="item.key" :ref="item.key" :type="item.key" @create="showCreatedTimes" />
          <!--<component :is="item.key" :ref="item.key" :type="item.key" @create="showCreatedTimes" />-->
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

有五个tab-pane, 其中三个子组件中有activated方法。这三个子组件中都有连接跳转到person, 当在person中进行:this.$router.go(-1)

    // 取消,关闭返回
    cancelSubmit() {
      // 调用全局挂载的方法,关闭当前页
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },

这时三个子组件的activated方法都会执行吗?如何只让跳转到person中的哪个子组件的activated方法执行,其它两个不执行activated方法

到此这篇关于vue activated在子组件中的使用详情的文章就介绍到这了,更多相关vue activated在子组件中的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue原生方法自定义右键菜单

    vue原生方法自定义右键菜单

    这篇文章主要为大家详细介绍了vue原生方法自定义右键菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 浅谈Vue 自动化部署打包上线

    浅谈Vue 自动化部署打包上线

    这篇文章主要介绍了浅谈Vue 自动化部署打包上线,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • Vue路由跳转方式区别汇总(push,replace,go)

    Vue路由跳转方式区别汇总(push,replace,go)

    vue项目中点击router-link标签链接都属于声明式导航。vue项目中编程式导航有this.$router.push(),this.$router.replace(),this.$router.go()​​​​​​​。这篇文章主要介绍了Vue路由跳转方式区别汇总(push,replace,go)
    2022-12-12
  • 详解vue2.6插槽更新v-slot用法总结

    详解vue2.6插槽更新v-slot用法总结

    在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。这篇文章主要介绍了详解vue2.6插槽更新v-slot用法总结,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-03-03
  • vue实现关键字高亮效果的示例代码

    vue实现关键字高亮效果的示例代码

    这篇文章主要为大家详细介绍了如何使用vue实现关键字高亮效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-11-11
  • vue解决一个方法同时发送多个请求的问题

    vue解决一个方法同时发送多个请求的问题

    今天小编就为大家分享一篇vue解决一个方法同时发送多个请求的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue3实现移动端滑动模块

    vue3实现移动端滑动模块

    这篇文章主要为大家详细介绍了vue3实现移动端滑动模块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • vue-cli构建的项目如何手动添加eslint配置

    vue-cli构建的项目如何手动添加eslint配置

    这篇文章主要介绍了vue-cli构建的项目如何手动添加eslint配置,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue循环中多个input绑定指定v-model实例

    Vue循环中多个input绑定指定v-model实例

    这篇文章主要介绍了Vue循环中多个input绑定指定v-model实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue LogicFlow更多配置选项示例详解

    vue LogicFlow更多配置选项示例详解

    这篇文章主要为大家介绍了vue LogicFlow更多配置选项详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01

最新评论