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

How to choose transaction isolation level in MySQL project

introduction Let's start with our content. I ...

How to solve the error "ERROR 1045 (28000)" when logging in to MySQL

Today, I logged into the server and prepared to m...

Steps to encapsulate the carousel component in vue3.0

Table of contents 1: Encapsulation idea 2. Packag...

Optimize the storage efficiency of BLOB and TEXT columns in InnoDB tables

First, let's introduce a few key points about...

Pitfalls and solutions for upgrading MySQL 5.7.23 in CentOS 7

Preface Recently, I found a pitfall in upgrading ...

MySQL detailed single table add, delete, modify and query CRUD statements

MySQL add, delete, modify and query statements 1....

CSS 3.0 text hover jump special effects code

Here is a text hovering and jumping effect implem...

UrlRewriter caching issues and a series of related explorations

When developing a website function, the session c...

MySQL complete collapse: detailed explanation of query filter conditions

Overview In actual business scenario applications...

A performance bug about MySQL partition tables

Table of contents 2. Stack analysis using pt-pmap...

Tips for data statistics in MySQL

As a commonly used database, MySQL requires a lot...

Solution to forgetting the administrator password of mysql database

1. Enter the command mysqld --skip-grant-tables (...

CentOS installation mysql5.7 detailed tutorial

This article shares the detailed steps of install...

MySQL join buffer principle

Table of contents 1. MySQL join buffer 2. JoinBuf...