j2ee大型网站开发框架,做网站花都,网站开发公司计划书,建设银行 成都 招聘网站目录 前言1. 基本知识2. Demo3. 拓展 前言
原先写过一篇父传子#xff0c;推荐阅读#xff1a;详细分析Vue3中的props用法#xff08;父传子#xff09;
实战中也常用这种方式#xff0c;今天突然发现还有另外一种方式#xff0c;对此进行深入探讨学习下
1. 基本知识 … 目录 前言1. 基本知识2. Demo3. 拓展 前言
原先写过一篇父传子推荐阅读详细分析Vue3中的props用法父传子
实战中也常用这种方式今天突然发现还有另外一种方式对此进行深入探讨学习下
1. 基本知识
在 Vue 3 中provide 和 inject 是用于组件间数据共享的 API允许父组件向子组件传递数据而不需要通过 props 一层层传递 provide 在父组件中定义可以提供数据给其所有子孙组件 该数据可以是任何类型对象、数组、基本数据类型等 inject 在子组件中使用用于接收来自祖先组件提供的数据 通过 inject子组件可以直接使用父组件提供的数据而无需通过 props
基本的步骤也很简单就是父组件使用provide提供数据子组件使用inject接收数据
2. Demo
基本的项目结构如下
my-vue-app
├── src
│ ├── components
│ │ ├── ParentComponent.vue
│ │ ├── ChildComponent.vue
│ ├── App.vue
│ ├── main.js创建一个父组件 ParentComponent.vue在其中提供一些数据
!-- src/components/ParentComponent.vue --
templatedivh2父组件/h2p提供的主题颜色: {{ themeColor }}/pChildComponent //div
/templatescript
import { provide, ref } from vue;
import ChildComponent from ./ChildComponent.vue;export default {components: {ChildComponent},setup() {// 创建一个响应式变量const themeColor ref(blue);// 使用 provide 提供数据provide(themeColor, themeColor);return {themeColor};}
};
/script创建子组件 创建一个子组件 ChildComponent.vue在其中注入父组件提供的数据
!-- src/components/ChildComponent.vue --
templatedivh3子组件/h3p使用的主题颜色: {{ themeColor }}/p/div
/templatescript
import { inject } from vue;export default {setup() {// 使用 inject 获取提供的数据const themeColor inject(themeColor);return {themeColor};}
};
/script更新 App.vue 在 App.vue 中使用父组件
templatediv idappParentComponent //div
/templatescript
import ParentComponent from ./components/ParentComponent.vue;export default {components: {ParentComponent}
};
/script3. 拓展
通过按钮点击改变主题颜色
相关的结构如下
my-vue-app
├── src
│ ├── components
│ │ ├── ParentComponent.vue
│ │ ├── ChildComponent.vue
│ │ ├── ColorChanger.vue
│ ├── App.vue
│ ├── main.js在父组件 ParentComponent.vue 中提供一个状态主题颜色和一个方法改变颜色
!-- src/components/ParentComponent.vue --
templatedivh2父组件/h2p当前主题颜色: {{ themeColor }}/pChildComponent /ColorChanger //div
/templatescript
import { provide, ref } from vue;
import ChildComponent from ./ChildComponent.vue;
import ColorChanger from ./ColorChanger.vue;export default {components: {ChildComponent,ColorChanger},setup() {// 创建一个响应式变量const themeColor ref(blue);// 方法改变颜色const changeColor (newColor) {themeColor.value newColor;};// 使用 provide 提供数据和方法provide(themeColor, themeColor);provide(changeColor, changeColor);return {themeColor};}
};
/script创建子组件 在子组件 ChildComponent.vue 中注入并使用主题颜色
!-- src/components/ChildComponent.vue --
templatedivh3子组件/h3p使用的主题颜色: {{ themeColor }}/p/div
/templatescript
import { inject } from vue;export default {setup() {// 使用 inject 获取提供的数据const themeColor inject(themeColor);return {themeColor};}
};
/script创建颜色改变组件 在 ColorChanger.vue 中注入并使用改变颜色的方法
!-- src/components/ColorChanger.vue --
templatedivh3颜色改变器/h3button clickchangeColor(red)红色/buttonbutton clickchangeColor(green)绿色/buttonbutton clickchangeColor(blue)蓝色/button/div
/templatescript
import { inject } from vue;export default {setup() {// 使用 inject 获取提供的方法const changeColor inject(changeColor);return {changeColor};}
};
/script更新 App.vue 在 App.vue 中使用父组件
templatediv idappParentComponent //div
/templatescript
import ParentComponent from ./components/ParentComponent.vue;export default {components: {ParentComponent}
};
/script截图如下
