Dynamic components of vue2 learning

catalogue

1 dynamic components

1.1 use of internal component component

1.1.1 concept and use

1.1.2 screenshot of operation

1.2 use of internal components keep alive components

1.2.1 concept and use

1.2.2 which life cycle does it run in vue?

1.2.3 registered name and name of the component

1 dynamic components

1.1 use of internal component component

1.1.1 concept and use

  • Vue provides components internally. The function of component component is to realize dynamic rendering components and display components on demand.

  • The component tag is built-in to vue and serves as a placeholder for components

  • The value of the is attribute, indicating the name of the component to be rendered

  • The value of the is attribute should be the registered name of the component under the components node

  • For example, we have two components Left and Right. Requirements: click the button in the app root component to display the component on demand.

  • Here are some key codes:

<template>
  <div class="app-container">
    <h1>App Root component</h1>
    <hr />
    <button @click="comName = 'Left' ">Exhibition Left assembly</button>
    <button @click="comName = 'Right' ">Exhibition Right assembly</button>
​
    <div class="box">
      <!-- Render Left Components and Right assembly -->
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>
​
<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
export default {
    data(){
    return{
      comName:'Left'
    }
  },
    components:{
    Right,
    Left
  },
}
    
</script>

1.1.2 screenshot of operation

Show Left component by default

Click Show to display the Right component:

1.2 use of internal components keep alive components

1.2.1 concept and use

  • Keep alive caches internal components instead of destroying them;

  • When using keep alive, you can specify which components need to be cached through include;

  • Or, specify which components do not need to be cached through the exclude attribute; However: do not use both include and exclude attributes at the same time

The keep alive component wraps the component component directly to realize the urban cache of the default package, instead of switching to the Right component and then cutting back, the Lift component will be recreated.

<keep-alive exclude="MyRight">
     <component :is="comName"></component>
</keep-alive>

When we switch to the Right component, the Right component will be cached, so when we switch back, the operation of the Left component is still in progress:

 

1.2.2 which life cycle does it run in vue?

  • When a component is created for the first time, both the created life cycle and the activated life cycle will be executed

  • When a component is activated, only the activated life cycle will be triggered, and created will no longer be triggered. Because the component was not recreated

<script>
export default {
  name: 'MyLeft',
  data() {
    return {
      count: 0
    }
  },
  created() {
    console.log('Left The component has been created!')
  },
  destroyed() {
    console.log('Left The component was destroyed~~~')
  },
​
  // When a component is created for the first time, both the created life cycle and the activated life cycle will be executed
  // When a component is activated, only the activated life cycle will be triggered, and created will no longer be triggered. Because the component was not recreated
  activated() {
    console.log('The component is activated, activated')
  },
  deactivated() {
    console.log('Components are cached, deactivated')
  }
}
</script>

(1) When a component is created for the first time, both the created life cycle and the activated life cycle will be executed:

(2) When a component is activated, only the activated life cycle will be triggered, and created will no longer be triggered. Because the component was not recreated:

1.2.3 registered name and name of the component

If the name of the component is not specified when "declaring the component", the name of the component is "the name at the time of registration" by default

components: {
 / / if the name of the component is not specified when "declaring the component", the name of the component is "the name at the time of registration" by default
    Left,
    Right
  }

 

If a name is given to a component, it should be used when debugging and when specifying a name with keep alive.

Generally, the component will be given a name in development, and the registered name is only used when using the component.

export default {
  name: 'MyLeft',
  }
​
<keep-alive exclude="MyRight">
      <component :is="comName"></component>
</keep-alive>

The article is constantly updated. If you feel useful, please pay attention to it.

Xingyue front end bloghttps://xingyue.vercel.app/

Record the front-end learning notes. You are welcome to collect or give comments.

Tags: Javascript Vue Vue.js

Posted by simply07 on Wed, 03 Aug 2022 21:43:56 +0300