祖組件

<template><div class="text">測試 piano或者inject測試index{{ menuVisible }}<Parent /></div> </template><script> import {defineComponent,getCurrentInstance,reactive,provide,ref, } from "vue"; import Parent from "@/views/ceShi/modules/parent.vue";export default defineComponent({name: "",// 注冊你的組件components: { Parent },emits: {},setup(props, { attrs, slots, emit, expose }) {const menuVisible = ref(true);provide("menuVisible", menuVisible);return {menuVisible,attrs, // Attribute (非響應式對象，等同于 attrs)，有狀態，會隨組件本身的更新而更新slots,emit, // 觸發事件 (方法，等同于 emit)expose, // 暴露公共 property (函數)};},methods: {}, }); </script><style lang="scss" scoped> .text {color: #ccc; } </style>

父組件

<template><div class="parent">parent{{ menuVisible }}<Children /><!-- <button @click="toggle">點擊父組件切換</button> --></div> </template><script> import {defineComponent,getCurrentInstance,reactive,ref,inject, } from "vue"; import Children from "@/views/ceShi/modules/children.vue";export default defineComponent({name: "",// 注冊你的組件components: { Children },props: {},emits: {},setup(props, { attrs, slots, emit, expose }) {const menuVisible = inject("menuVisible");return {menuVisible,attrs, // Attribute (非響應式對象，等同于 attrs)，有狀態，會隨組件本身的更新而更新slots,emit, // 觸發事件 (方法，等同于 emit)expose, // 暴露公共 property (函數)};},methods: {}, }); </script><style lang="scss" scoped></style>

孫子組件

<template><div class="children">children{{ menuVisibleChildren }}<!-- {{ menuVisible }} --><button @click="togal">點擊切換</button></div> </template><script> import {defineComponent,getCurrentInstance,reactive,ref,inject, } from "vue";export default defineComponent({name: "",// 注冊你的組件components: {},props: {},emits: {},setup(props, { attrs, slots, emit, expose }) {const menuVisibleChildren = inject("menuVisible");const togal = () => {menuVisibleChildren.value = !menuVisibleChildren.value;};return {togal,menuVisibleChildren,attrs, // Attribute (非響應式對象，等同于 attrs)，有狀態，會隨組件本身的更新而更新slots,emit, // 觸發事件 (方法，等同于 emit)expose, // 暴露公共 property (函數)};},methods: {}, }); </script><style lang="scss" scoped></style>

總結

以上是生活随笔為你收集整理的vue3中 inject provide的响应式使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。