Vue依赖注入之Provide/Inject

1. 使用<script setup>
父组件

<template>
  <div>这里是父组件的message值:{{ message }}</div>
  <br />
  <div>这里是父组件的count值:{{ count }}</div>
  <br />
  <classtest />
</template>
<script setup>
import classtest from "./components/classtest.vue";

import { ref, provide,readonly } from "vue";

let message = ref("我是message的值");

let count = ref(1);
function addcount() {
  count.value++;
}

let nocount = ref(1);

//这里只提供一个值给与其下所有子组件使用
//provide("注入名", 值);
//如果想让其下子组件修改注入名为message的值,那么值必须为响应式
provide("message", message);

//这里只提供一个对象给与其下所有子组件使用
//provide("注入名", {以对象形式输出多个值});
provide("obj", {
  count,
  addcount,
});

//提供一个值给与其下所有子控件使用,但是这个是只读的
//如果进行修改会提示Set operation on key "value" failed: target is readonly. 
provide('nocount',readonly(nocount))
</script>
<style scoped>
</style>

子组件classtest

<template>
  <classtest2 />
</template>

<script setup>
import classtest2 from "./classtest2.vue";
</script>

<style>
</style>

子组件classtest2

<template>
  <div>这里是classtest2接收到父组件的messages值{{ messages }}</div>
  <br>
  <!--这里是接收到的父组件定义的穿透值count-->
  <div>这里是classtest2接收到父组件的count值{{ count }}</div>
  <br>
  <!--此处使用click方法可以直接修改父控件count的值,也可以修改此组件调用的count的值-->
  <button @click="addcount">执行父组件的addcount方法</button>
  <br>
  <!--此处使用click方法可以直接修改父控件count的值,也可以修改此组件调用的count的值-->
  <button @click="addcount1">执行此组件的addcount1方法</button>
  <br>
  <!--这里是接收到的父组件定义的穿透值nocount,但其设置了只读属性-->
  <div>这里是classtest2接收到父组件不允许修改的nocount值{{ nocount }}</div>
  <br>
  <!--此处使用click方法不可以修改nocount的值,因为其设置了只读-->
  <button @click="addnocount">执行父组件的addcount方法</button>
</template>

<script setup>
import { inject } from "vue";

//使用inject接收父组件定义的注入名
//let 变量名 = inject(父组件的provide注入值);
let messages = inject("message");

//使用inject接收父组件provide的住入值,其注入值为一个对象
let { count, addcount } = inject("obj");
function addcount1()
{
  count.value++
}

let nocount = inject("nocount");
function addnocount()
{
  nocount.value++
}
</script>

<style>
</style>

2. 不使用<script setup>
父组件

<template>
  <div>这里是父组件的message值:{{ message }}</div>
  <br />
  <div>这里是父组件的count值:{{ count }}</div>
  <br />
  <classtest />
</template>
<script>
import classtest from "./components/classtest.vue";
import { ref,provide,readonly } from "vue";

export default {
  components:{
    classtest
  },
  setup() {
    let message = ref("我是message的值");

    let count = ref(1);
    function addcount() {
      count.value++;
    }

    let nocount = ref(1);

    //这里只提供一个值给与其下所有子组件使用
    //provide("注入名", 值);
    provide("message", message);

    //这里只提供一个对象给与其下所有子组件使用
    //provide("注入名", {以对象形式输出多个值});
    provide("obj", {
      count,
      addcount,
    });

    //提供一个值给与其下所有子控件使用,但是这个是只读的
    //如果进行修改会提示Set operation on key "value" failed: target is readonly.
    provide("nocount", readonly(nocount));

    return{
      message,
      count,
      nocount
    }
  },
};
</script>
<style scoped>
</style>

子组件classtest

<template>
  <classtest2 />
</template>

<script setup>
import classtest2 from "./classtest2.vue";
</script>

<style>
</style>

子组件classtest2

<template>
  <div>这里是classtest2接收到父组件的messages值{{ messages }}</div>
  <br />
  <!--这里是接收到的父组件定义的穿透值count-->
  <div>这里是classtest2接收到父组件的count值{{ count }}</div>
  <br />
  <!--此处使用click方法可以直接修改父控件count的值,也可以修改此组件调用的count的值-->
  <button @click="addcount">执行父组件的addcount方法</button>
  <br />
  <!--此处使用click方法可以直接修改父控件count的值,也可以修改此组件调用的count的值-->
  <button @click="addcount1">执行此组件的addcount1方法</button>
  <br />
  <!--这里是接收到的父组件定义的穿透值nocount,但其设置了只读属性-->
  <div>这里是classtest2接收到父组件不允许修改的nocount值{{ nocount }}</div>
  <br />
  <!--此处使用click方法不可以修改nocount的值,因为其设置了只读-->
  <button @click="addnocount">执行父组件的addcount方法</button>
</template>

<script>
import {inject} from 'vue'

export default {
  setup() {
    //使用inject接收父组件定义的注入名
    //let 变量名 = inject(父组件的provide注入值);
    let messages = inject("message");

    //使用inject接收父组件provide的住入值,其注入值为一个对象
    let { count, addcount } = inject("obj");
    function addcount1() {
      count.value++;
    }

    let nocount = inject("nocount");
    function addnocount() {
      nocount.value++;
    }
    return {
      messages,
      count,
      addcount,
      addcount1,
      nocount,
      addnocount
    }
  },
};
</script>

<style>
</style>

3. 定义全局

import './assets/main.css'

import { createApp} from 'vue'
import App from './App.vue'


createApp(App)
//此处注册一个全局的message
//注意如果子组件又使用provide定义了一个message注入
//则此子组件的下属组件将使用此子组件新注入的message的值
.provide('message', 'Hello')
.mount('#app')