[Vue3学习笔记]provide与inject

provide与inject

• 实现跨层级组件(祖孙)间通信

---

• 父组件provide

    const color=ref('red')
    // 提供数据 
    provide('color',color)

• 孙组件inject

    const color=inject('color')

Father.vue

<!--
 * @Author: 41
 * @Date: 2021-12-07 17:12:43
 * @LastEditors: 41
 * @LastEditTime: 2021-12-21 15:16:43
 * @Description: 
-->
<template>
  <h2>provide与inject</h2>
  <p>当前颜色：{{color}}</p>
  <button @click="color='red'">红色</button>
  <button @click="color='yellow'">黄色</button>
  <button @click="color='green'">绿色</button>
  <Son/>
  
</template>

<script lang="ts">
import {defineComponent, provide, ref} from 'vue'
import Son from './components/Son.vue'
export default defineComponent({
  name:'App',
  components:{
    Son
  },
  setup(){
    const color=ref('red')
    // 提供数据 
    provide('color',color)
    return {
      color
    }
  }
})
</script>

Son.vue

<!--
 * @Author: 41
 * @Date: 2021-12-21 15:13:00
 * @LastEditors: 41
 * @LastEditTime: 2021-12-21 15:14:52
 * @Description: 
-->
<template>
    <h2>Son子级组件</h2>
    <hr>
    <GrandSon/>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import GrandSon from './GrandSon.vue'
export default defineComponent({
    name:'son',
    components:{
        GrandSon
    }
})
</script>

GrandSon.vue

<!--
 * @Author: 41
 * @Date: 2021-12-21 15:13:48
 * @LastEditors: 41
 * @LastEditTime: 2021-12-21 15:19:27
 * @Description: 
-->
<template>
    <h3 :style="{color}">GrandSon孙子组件</h3>
</template>

<script lang="ts">
import {defineComponent, inject} from 'vue'
export default defineComponent({
    name:'GrandSon',
    setup(){
        const color=inject('color')
        return {
            color
        }
    }
})
</script>

补充：响应式数据的判断

• isRef：检查一个值是否为一个ref对象
• isReactive：检查一个对象是否是由reactive创建的响应式代理
• isReadonly：检查一个对象是否由readonly创建的只读代理
• isProxy：检查一个对象是否是由reactive或者readonly方法创建的代理

一些新组件

• Fragment片段，这个感觉不需要自己来写，搞好了
• Teleport，瞬移，把某些代码块放到组件外，比如body
• Suspense
  注意：Vue3中动态引入组件的方法变了

import {defineComponent, defineAsyncComponent} from 'vue'
const AsyncComponent=defineAsyncComponent({
	()=>import('./AsyncComponent.vue')
})

---

相当于指定一个加载的界面，有些从react拿来主义的意思

<template>
  <Suspense>
    <template #default>
      <AsyncComponent/>
    </template>
    <template #fallback>
      Loading ...
    </template>
  </Suspense>
</template>