docs: update vue.md (#144)
This commit is contained in:
parent
b67c2ed842
commit
094025da3f
40
docs/vue.md
40
docs/vue.md
@ -616,6 +616,46 @@ const onSearch = function(){
|
||||
|
||||
父组件调用子组件的方法
|
||||
|
||||
### Provide / Inject
|
||||
|
||||
```ts
|
||||
// types
|
||||
import type { InjectionKey, Ref } from 'vue'
|
||||
|
||||
export const ProvideKey = Symbol() as InjectionKey<Ref<string>>
|
||||
```
|
||||
|
||||
```ts
|
||||
<script setup lang="ts">
|
||||
import { provide, ref } from 'vue'
|
||||
import { ProvideKey } from './types'
|
||||
|
||||
const text = ref<string>('123')
|
||||
provide(ProvideKey, text)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input v-model="text" />
|
||||
</template>
|
||||
```
|
||||
|
||||
父组件为后代组件提供数据
|
||||
|
||||
```ts
|
||||
<script setup lang="ts">
|
||||
import { inject } from 'vue'
|
||||
import { ProvideKey } from './types'
|
||||
|
||||
const value = inject(ProvideKey)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h4>{{value}}</h4>
|
||||
</template>
|
||||
```
|
||||
|
||||
后代组件注入父组件提供的数据
|
||||
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
API 参考
|
||||
|
Loading…
x
Reference in New Issue
Block a user