首页vue3如何进行组件传值

vue3如何进行组件传值

时间: 2023-11-07 17:17:24 浏览: 168

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 都有相应的解决方案。合理选择合适的通信方式对于提高开发效率和代码可维护性具有重要意义。

在Vue 3中，组件之间传值主要有以下几种方式： 1. props传递：父组件通过props向子组件传递数据，子组件通过props接收数据。props可以设置类型、默认值等属性，具体使用方法可以参考Vue 3官方文档。 2. emit事件：子组件通过emit方法触发自定义事件，父组件通过v-on监听事件并处理传递的数据。通过emit事件可以实现子组件向父组件传递数据的功能。 3. provide / inject：父组件通过provide提供数据，子组件通过inject注入数据。这种方式可以实现祖先组件向后代组件传递数据的功能，但是不适合在跨级组件中使用。 4. $attrs / $listeners：在Vue 3中，父组件通过v-bind="$attrs"将非props属性传递给子组件，在子组件中可以通过$vnode.data.attrs获取这些属性。同时，父组件通过v-on="$listeners"将非原生事件传递给子组件，在子组件中可以使用$emit方法触发这些事件。以上是Vue 3中常用的组件传值方式，具体使用方法可以参考Vue 3官方文档。

阅读全文

相关推荐

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通全年可省5,000元立即开通

最新推荐

vue3如何进行组件传值

相关推荐

vue-prop父组件向子组件进行传值的方法

vue实现组件之间传值功能示例

vue3 兄弟组件传值

vue3祖孙组件传值

vue3子孙组件传值

vue3 ts组件传值

vue3兄弟组件传值

vue3 父子组件传值

vue3父子组件传值

vue3相邻组件传值

VUE3父子组件传值

vue3父组件传值子组件

vue3 子组件传值父组件

vue3 父子组件传值emit

vue3 父子组件传值 defineProps

vue3父子组件传值 setup

ts vue3 父子组件传值

vue3 父子组件传值 理论

vue3父子组件传值延迟

最新推荐

Vue 组件传值几种常用方法【总结】

vue父组件向子组件动态传值的两种方法

LABVIEW程序实例-DS写属性数据.zip

Windows平台下的Fastboot工具使用指南

管理建模和仿真的文件

DLMS规约深度剖析：从基础到电力通信标准的全面掌握

修改代码，使其正确运行

Python机器学习基础入门与项目实践

"互动学习：行动中的多样性与论文攻读经历"

【Shell脚本进阶】：wc命令行数统计的高级用法及解决方案

vue3 父子组件传值理论