vue 父子組件生命週期調用

遵循 牽頭是父 結尾是父  中間是子。看代碼

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.瀏覽器打印結果