vue 父子组件生命周期调用

╰半橙微兮° 2021-08-30 22:49 332阅读 0赞

遵循 牵头是父 结尾是父  中间是子。看代码

1.父组件内容

<template>
      <div>
        我是商品（父组件）
        <input type="text" v-model="name" style="background-color:red">
      
        <router-view></router-view>
      </div>
    </template>
    <script>
    import soup from "./soup";
    export default {
      name: "goods",
      data() {
        return {
          name: "wangwang"
        };
      },
      components: {
        soup
      },
     
      beforeCreate() {
        console.log("父组件 beforeCreate");
      },
      created() {
        console.log("父组件 created");
      },
      beforeMount() {
        console.log("父组件 beforeMount");
      },
      mounted() {
        console.log("父组件 mounted");
      },
      beforeUpdate() {
        console.log("父组件 beforeUpdate");
      },
      updated() {
        console.log("父组件 updated");
      },
      beforeDestroy() {
        console.log("父组件 beforeDestroy");
      },
      destroyed() {
        console.log("父组件 destroyed");
      }
    };
    </script>
    <style lang="stylus" rel="stylesheet/stylus"></style>

2.子组件内容

<template>
        <div>
            {
       {name}}我是子组件
        </div>
    </template>
    <script>
    export default {
        name: 'chils',
        props:['name'],
        data () {
            return {
               
            }
        },
        beforeCreate(){
            console.log('子组件 beforeCreate')
        },
        created(){
            console.log('子组件 created')
        },
        beforeMount(){
             console.log('子组件 beforeMount')
        },
        mounted(){
            console.log('子组件 mounted')
        },
        beforeUpdate(){
            console.log('子组件 beforeUpdate')
        },
        updated(){
            console.log('子组件 updated')
        },
        beforeDestroy(){
            console.log('子组件 beforeDestroy')
        },
        destroyed(){
            console.log('子组件 destroyed')
        },
        activated(){
            console.log('组件激活的时候')
        },
        deactivated(){
            console.log('组件停止的时候')
        }
    
    
    }
    </script>
    <style scoped>
    
    </style>

3.浏览器打印结果

![20200610211727270.png][]

[20200610211727270.png]: /images/20210730/d922c9861e7f40bc88b04acad9beb6a3.png