Component transfer participation lifecycle

Catalog

One · Component parameters

1. Definition and use

01   Import

02 register

03 Use

2. Father's son

1. Receive parameters and define default values

2. Using parameter num

3. Son father

Two · Life cycle

1. Concept

2. effect

3. Life cycle 8 individual

 1. Before and after creation

  2. Before and after mounting

3. Before and after the update

4. Before and after destruction

---

One · Component parameters

1. Definition and use

 //CounterCom.vue
<template>
   <button>1</button>
</template>
    App.vue

01   Import

import CounterCom from './components/CounterCom.vue'

02 register

components:{CounterCom}

03 Use

<CounterCom></CounterCom>
<counter-com></counter-com>

2. Father's son

  Use props The array passed from parent to child is read-only ( Default value , Read display ) It can't be modified
    App.vue In file
<CounterCom :num="10">
    CounterCom.vue In the component

1. Receive parameters and define default values

props:{
    "num":{type:Number,default:1}
}

2. Using parameter num

data(){
    return {counter:this.num}
}

3. Son father

Events used $emit
    

//CounterCom.vue
<button @click="counter++; $emit('counterchange',counter)">
 // App.vue
<CounterCom @counterchange="n=$event">

    $emit( Event name , Event value )   Send an event , Event name (counterchange) And event values (counter) Is custom

$event Fixed writing , Event value (counterchange Event value , It is also a sub component $emit Second parameter of )

Two · Life cycle

1. Concept

  Each component goes through a series of specific processes from creation to destruction , Called life cycle
The callback function executed by the process is called the life cycle hook function

2. effect

After creation launch ajax request
Operation after mounting dom
Add event listener
Remove interval calls before destruction , Event monitoring

  explain : Not every life cycle must use

3. Life cycle 8 individual

 1. Before and after creation

 beforeCreate Before creation ：
       characteristic : Yes this, No, data And methods Method
created After creation
         characteristic : Yes data, No, $el,dom node
   use :ajax request , Timer , Event monitoring

  2. Before and after mounting

 beforeMount Before mounting
             characteristic : Yes $el , The data is not rendered
        mounted After mounting
             characteristic : Yes dom node , Data is also rendered
             use : Operation node ,ajax request

3. Before and after the update

beforeUpdate Before updating
             characteristic : Will execute many times , Data update ,dom Node not updated
        updated Updated completely
             characteristic : Will execute many times , Data update ,dom Nodes are also updated

4. Before and after destruction

  beforeDestroy Before destruction
             characteristic : Data can be updated , The view is no longer updated
             use : Remove event monitoring , Stop timer
        destroyed Destroyed
             characteristic : No, this, Switch views with vue The connection of examples