父子组件的问题

父组件和子组件的生命周期的顺序

// 父组件
<template>
  <div class="box">
  
   <my-slot ref="myslot" :dataArr="dataArr">
  </my-slot>
  
  </div>
 <template>
 
 <script>
import mySlot from './comment/tab_b_components/index'

export default {
  components:{
    'my-slot':mySlot
  },
  
  created(){
    console.log('触发组件created')
  },
  beforeMount(){
    console.log('触发组件beforeMount')
  },
  mounted(){
    console.log('触发组件mounted')
  },
  beforeUpdate(){
    console.log('触发组件beforeUpdate')
  },
  updated(){
    console.log('触发组件updated')
  },
}

</script>

// 子组件
<template>
  <div>
  	 <!-- 默认插槽 -->
      <slot></slot>
      <!-- 作用域插槽，其实是"具名插槽"+"上传递数据"的结合 -->
      <slot name="myslot" :mydata="dataArr[0]"/>
  </div>
</template>

<script>
export default {
	props: {
        dataArr: {
            type: Array,
            default: ()=> {
                return []
            }
        }
    },
    data(){
        return{
        }
    },
    beforeCreate(){
        console.log('CHILD的beforeCreate')
    },
    created(){
        console.log('CHILD的created')
    },
    beforeMount(){
        console.log('CHILD的beforeMount')
    },
    mounted(){
        console.log('CHILD的mounted')
    },
    beforeUpdate(){
        console.log('CHILD的beforeUpdate')
    },
    updated(){
        console.log('CHILD的updated')
    },
    methods: {
    }
}
</script>

<style>

</style>

执行的结果：

总结：

• 加载渲染过程:

  父beforeCreate-> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子created-> 子 beforeMount -> 子 mounted -> 父 mounted

• 子组件更新过程 父 beforeUpdate -> 子beforeUpdate-> 子 updated -> 父 updated

• 父组件更新过程 父 beforeUpdate -> 父 updated

• 销毁过程 父beforeDestroy-> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

父子组件的传值

父组件向子组件传值

父组件传值

父组件以绑定属性的形式传值给子组件:dataArr="dataArr",代码如下：

// 父组件
<template>
  <div class="box">
  
   <my-slot ref="myslot" :dataArr="dataArr">
  </my-slot>
  
  </div>
 <template>

子组件接收值：

props: {
        dataArr: {
            type: Array,
            default: ()=> {
                return []
            }
        }

子组件向父组件传值

子组件传值

 methods: {
        outPutChildDate() {
        let childData = '子组件的数据'
        this.$emit('outPutChildDate',childData)
        }
    }

父组件接收值

<template>
  <div class="box">
  	<my-slot
    	:dataArr="dataArr" 
        @outPutChildDate="outPutChildDate">
    <my-slot/>
  </div>
</template>
  
 <script>
import mySlot from './comment/tab_b_components/index'

export default {
  components:{
    'my-slot':mySlot
  },
  
 methods: {
    outPutChildDate(val){
      console.log('接收子组件传来的值：',val)
    }
 }
}

</script>

除了这种方式接受值之外，我们还是可以使用其他方式接受父组件的内容的，不需要传值过来： this.$parent