向后代组件传值provide 和 inject

一,非响应式传值

向子组件传值时，可以使用props。而如果需要向层次更深的后代组件传值时，如果继续使用props，需要逐级一层一层传递，非常的麻烦

父组件使用provide

 data(){
    return{
      num:0
    }
  },
  provide(){
    return{
      num:this.num
    }

而后代组件使用jnject接收

  <div>
我是孙子{{num}}
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  inject:["num"]

例

此时我们可以使用一对 provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

但我们在父级添加一个方法,单击的时候数据+1,

非响应式

我们发现通过props父级给子级传值是跟着响应式变化的,而通过provide和inject是不随着响应式变化
如果期望响应式的传值,就要用到setup组合式api
import {provideref,ref,reactive} from "vue"

• ref 把基础数据处理响应式数据
• reactive 把对象数据变成一个响应式数据
• 在父级中

setup(){
    let num = ref(0)//把基础数据处理响应式数据,reactive把对象数据变成一个响应式数据

    //提供给后辈
    provide("num",num)
  },

在子级中

<template>
  <div>
我是孙子{{num}}
  </div>
</template>

<script>
import {inject} from 'vue';
export default {
  data () {
    return {
    }
  },
  setup(){
    let num = inject("num")

    return {
        num
    }
  }
}
</script>

例

插槽

什么是插槽呢?就是调用子组件标签中中间写的内容

<Sun :a="num">123456</Sun>

那么中间的内容并不会在页面中显示出来,那么去哪里了呢
需要使用<slot></slot>标签能将插槽里面的东西使用出来

那么他用在什么地方呢,就是模板都是一样而内容不一样的地方

<Sun :a="num">123456</Sun>
<Sun :a="num">one two three four</Sun>
<Sun :a="num">一,二,三,四</Sun>

slot