provide/inject

<template>

<div>爷爷{{ msg }}</div>

<father />

<son />

</template>

<script setup lang='ts'>

import { ref, provide, readonly } from 'vue'

import father from '../study/provide/father.vue';

import son from '../study/provide/son.vue';

let msg = ref<string>('hello world')

// provide('msg', msg)

provide('msg', readonly(msg)) // 由于子组件可以修改爷组件传来的值，为了保证数据的一致性，这里使用readonly

</script>

<style scoped lang='scss'>

</style>

 

<template>

<div>父亲{{ msg }}</div>

</template>

<script setup lang='ts'>

import { inject } from 'vue'

let msg = inject('msg')

</script>

<style scoped lang='scss'>

</style>

 

<template>

  <div>

    儿子{{ msg }}

    <button @click="change">改变provide值</button>

  </div>

  </template>

 

  <script setup lang='ts'>

  import { inject, ref } from 'vue'

  import type { Ref } from 'vue'

  // let msg = inject<Ref<string>>('msg')

  // const change = () => {

  //   // msg.value = 'change' // 没设置默认值的情况下，这里会报错，因为不确定是否有值

  //   if (msg) {

  //     msg.value = 'change'

  //   }

  // }

  // inject的第一个参数是provide的key，第二个参数是默认值

  let msg = inject<Ref<string>>('msg', ref('defalut Value'))

  const change = () => { // 子组件可以修改响应式的修改爷组件传来的值，为了保证数据的一致性，不建议这样做

    msg.value = 'change'

  }

  </script>

 

  <style scoped lang='scss'>

 

  </style>