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>