Vue

Vue3語法糖-provide 和 inject

父组件代碼如下

  • 引入provide
  • 申明宣告
1
2
3
4
5
6
7
8
9
10
11
<template>
    <Inject></Inject>
</template>

<script setup lang="ts">
import { ref,provide } from 'vue';
import Inject from '../components/Inject.vue';
  const title = ref('這是provide to jnject')
  provide('title',title)
</script>

子組件代碼如下

  • 引入inject
  • 引入孫組件
  • 申明宣告inject
1
2
3
4
5
6
7
8
<template>
{{ sendTitle }}
</template>

<script setup lang="ts">
import { ref, inject } from 'vue';
const sendTitle =inject('title')
</script>

孫組件代碼如下

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>
    <div>Model</div>
    <h3>{{ data }}</h3>
  </div>
</template>

<script setup lang="ts">

import { inject } from 'vue'

const data = inject('data')
</script>

provide & inject