Vue 使用依赖注入的方式共享数据的过程

<template>
  <div>
    <h1>我是祖先组件</h1>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  name: 'AncestorComponent',
  components: {
    ChildComponent
  },
  // 提供一个名为message的数据
  provide: {
    message: 'Hello from ancestor'
  }
}
</script>

<template>
  <div>
    <h2>我是后代组件</h2>
    <p>{{ message }}</p>
  </div>
</template>

// 后代组件
<script>
export default {
  name: 'ChildComponent',
  // 接收一个名为message的数据
  inject: ['message']
}
</script>

<template>
  <div>
    <h1>我是提供者组件</h1>
    <button @click="count++">增加计数</button>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
import { ref, provide } from 'vue'
export default {
  name: 'ProviderComponent',
  components: {
    ChildComponent
  },
  setup() {
    // 使用ref创建一个响应式的计数器
    const count = ref(0)
    // 提供给后代组件
    provide('count', count)
    return {
      count
    }
  }
}
</script>

<template>
  <div>
    <h2>我是接收者组件</h2>
    <p>计数器的值是：{{ count }}</p>
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
  name: 'ChildComponent',
  setup() {
    // 接收提供者组件提供的响应式对象
    const count = inject('count')
    return {
      count
    }
  }
}
</script>

<template>
  <div>
    <h2>我是接收者组件</h2>
    <p>计数器的值是：{{ count }}</p>
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
  name: 'ChildComponent',
  setup() {
    // 接收提供者组件提供的响应式对象
    const count = inject('count')
    return {
      count
    }
  }
}
</script>

<template>
  <div>
    <h2>我是接收者组件</h2>
    <p>消息是：{{ message }}</p>
    <button @click="updateMessage">更改消息</button>
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
  name: 'ChildComponent',
  setup() {
    // 接收提供者组件提供的响应式对象和方法
    const { message, updateMessage } = inject('message')
    return {
      message,
      updateMessage
    }
  }
}
</script>

<template>
  <div>
    <h1>我是提供者组件</h1>
    <p>姓名是：{{ name }}</p>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
import { ref, provide, readonly } from 'vue'
export default {
  name: 'ProviderComponent',
  components: {
    ChildComponent
  },
  setup() {
    // 使用ref创建一个响应式的姓名
    const name = ref('Alice')
    // 使用readonly包装提供的值，使其不可修改
    provide('name', readonly(name))
    return {
      name
    }
  }
}
</script>

<template>
  <div>
    <h2>我是接收者组件</h2>
    <p>姓名是：{{ name }}</p>
    <button @click="name = 'Bob'">尝试修改姓名</button>
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
  name: 'ChildComponent',
  setup() {
    // 接收提供者组件提供的只读对象
    const name = inject('name')
    return {
      name
    }
  }
}
</script>