Details of using vue activated in child components

Details of using vue activated in child components

Page: base:

<template>
  <div class="tab-container">
    <h1 style="text-align: center">
      Apply for {{ form.category }}{{ form.companyType }} to settle in</h1>
    <div class="form-panel" style="margin-left: 20px;text-align: right;">
      <el-button type="info" @click="cancelSave">Cancel</el-button>
      <el-button type="warning" @click="transientSave">Save temporarily</el-button>
      <el-button type="danger" @click="persistSave">Save</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>

There are five tab-pane , three of which have activated methods in their child components. All three subcomponents have connections to person . When in person : this.$router.go(-1)

    // Cancel, close return cancelSubmit() {
      //Call the global mount method to close the current page this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },

Will activated methods of the three subcomponents be executed at this time? How to jump to only the activated method of a subcomponent in person , and not execute the activated method of the other two

This is the end of this article about the details of using vue activated in subcomponents. For more information about the use of vue activated in subcomponents, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Usage of activated in Vue
  • Discussion and detailed use of keep-alive and activated in Vue
  • Vue life cycle activated returns to the previous page without re-requesting data operations

<<:  html page!--[if IE]...![endif]--Detailed introduction to usage

>>:  Detailed explanation of CSS3 rotating cube problem

Recommend

XHTML Web Page Tutorial

This article is mainly to let beginners understan...

IIS7 IIS8 reverse proxy rule writing, installation and configuration method

Purpose: Treat Station A as the secondary directo...

Implementation of tomcat image created with dockerfile based on alpine

1. Download the alpine image [root@docker43 ~]# d...

How to use uni-app to display buttons and search boxes in the top navigation bar

Recently, the company is preparing to develop an ...

Detailed explanation of the background-position percentage principle

When I was helping someone adjust the code today,...

Ubuntu 16.04 image complete installation tutorial under VMware

This article shares with you the installation tut...

Five ways to traverse objects in javascript Example code

Table of contents Prepare Five weapons for…in Obj...

MySQL 8.0.20 installation and configuration detailed tutorial

This article shares with you a detailed tutorial ...

Installation tutorial of mysql8.0rpm on centos7

First, download the diagram 1. First uninstall th...

VMware WorkStation 14 pro installation Ubuntu 17.04 tutorial

This article records the specific method of insta...

Detailed explanation of Docker Compose deployment and basic usage

1. Docker Compose Overview Compose is a tool for ...