首页vue3 依赖注入的使用

vue3 依赖注入的使用

时间: 2023-11-14 21:05:54 浏览: 110

vue3组件传值，依赖注入

### Vue3 组件传值与依赖注入详解在前端开发中，组件间的通信是至关重要的。Vue3 提供了多种方式来实现组件间的数据传递，包括但不限于 Props、Events、Vuex 以及依赖注入等机制。本文将围绕这些知识点展开详细讨论。 #### 一、Vuex 全局状态管理 **Vuex** 是 Vue.js 官方推荐的状态管理模式与库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这种方式非常适合大型单页应用，因为时间线上的多个视图可以共享同一份状态。 ##### 新建 Vuex Store 首先需要安装 Vuex： ```bash npm install vuex --save ``` 然后新建一个 `store.js` 文件来初始化 store： ```javascript import { createStore, mapMutations } from "vuex"; const store = createStore({ state: { // 全局参数 counter: 0 }, mutations: { // set 方法 add(state) { state.counter++; } }, actions: { // 可执行异步操作 incrementAsync({ commit }) { setTimeout(() => { commit("add"); }, 1000); } }, getters: { // get 方法 doge(state) { return state.counter; } } }); export default store; ``` ##### 在 Vue 组件中使用 Vuex 在 Vue 组件中使用 Vuex 需要先导入 store 并将其挂载到 Vue 实例上： ```vue <template> {{ store.state.counter }} <button @click="ad">加1</button> </template> <script setup lang="ts"> import store from "@/store-VueX.js"; const ad = () => { store.commit("add"); // mutations 中的方法 console.log(store.state.counter); }; </script> ``` #### 二、Props (父组件向子组件传值) **Props** 用于父组件向子组件传递数据，这是 Vue 中最常用也是最简单的通信方式之一。 ##### 创建父组件 ```vue <template> <page3 :title="uup" :age="ages + 10"></page3> </template> <script setup lang="ts"> import page3 from "@/page/page3.vue"; const ages = 20; const uup = "李扬"; </script> ``` ##### 创建子组件 ```vue <script setup lang="ts"> defineProps({ title: String, // prop 名字为 title，类型为 String age: Number // prop 名字为 age，类型为 Number }); </script> <template> <span>{{ title }}</span> <span>{{ age }}</span> </template> ``` #### 三、Vue 子组件向父组件传值 (this.$emit() 方法) 子组件可以通过 `$emit` 方法向父组件发送自定义事件，从而达到数据传递的目的。 ##### 父组件 ```vue <template> {{ k }} <pagek ref="page" @data="data"></pagek> </template> <script setup lang="ts"> import pagek from "@/page/page3.vue"; const k = ref(0); const data = (flag) => { k.value = flag; console.log(k.value); }; </script> ``` ##### 子组件 ```vue <script setup lang="ts"> const emit = defineEmits(["data"]); const put = () => { emit("data", 11); // data 为父组件的函数 console.log("触发"); }; </script> <template> <button @click="put">传值</button> </template> ``` #### 四、依赖注入 (provide 和 inject) 依赖注入是一种让父级组件向其子孙组件注入数据的方法，而不需要通过 props 层层传递。 ##### 使用依赖注入父组件 ```vue import { provide } from "vue"; provide("ly", "21"); ``` ##### 子组件 ```vue import { inject } from "@vue/runtime-core"; const names = inject("ly"); console.log(names); ``` ##### 全局配置 ```javascript import { createApp } from "vue"; const app = createApp({}); app.provide("message", "hello!"); ``` ### 结论通过以上介绍，我们可以看出 Vue3 提供了丰富的机制来处理组件间的通信问题。无论是简单的父子组件间通信，还是复杂的跨层级通信，Vue 都有相应的解决方案。合理选择合适的通信方式对于提高开发效率和代码可维护性具有重要意义。

在Vue3中，依赖注入的使用可以通过provide和inject来实现。在父组件中，通过provide可以指定要提供给后代组件的数据或方法。然后在任何后代组件中，可以使用inject来接收provide提供的数据或方法。具体使用步骤如下: 1. 在父组件中，使用provide函数来提供数据或方法。可以通过ref或reactive包裹数据以实现响应式。 2. 在后代组件中，使用inject函数来接收provide提供的数据或方法。可以声明一个变量来接收inject的返回值。需要注意的是，如果传递的是普通的值，是不具有响应式的，需要通过ref或reactive来添加响应式。依赖注入的使用场景是当父组件有很多数据需要分发给其子组件时，可以使用provide和inject来实现数据的共享和传递。

阅读全文