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')