Vue 组件传值（通信）方式详解

于 2024-10-03 01:15:58 发布
阅读量182 收藏 5
点赞数 10
分类专栏： 前端 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57836225/article/details/142686739
版权

目录

Vue 组件传值（通信）方式详解

一、Vue2 组件传值方式

（一）父传子

（二）子传父

（三）平辈之间传值

二、Vue3 中的组件传值方式

（一）父传子

（二）子传父

（三）平辈之间传值

三、总结

在 Vue 开发中，组件之间的传值是非常重要的环节。本文将详细介绍 Vue2 中的组件传值方式，并结合 Vue3 的情况进行分析，同时给出相应的代码示例。

一、Vue2 组件传值方式

（一）父传子

  1. 绑定形式传值
    • 在父组件中，通过单向绑定的方式将数据传递给子组件。例如：

   <template>
     <div>
       <list :str1="str1"></list>
     </div>
   </template>

   <script>
   import list from './list.vue';
   export default {
     components: { list },
     data() {
       return {
         str1: 'home 的数据',
       };
     },
   };
   </script>

  • 在子组件中，通过props接收父组件传递过来的数据。例如：

   <template>
     <div>{{ str1 }}</div>
   </template>

   <script>
   export default {
     props: {
       str1: {
         type: String,
         default: '',
       },
     },
   };
   </script>

  • 这种方式的优点是父传子很方便，但缺点是无法直接将数据传递给孙子辈组件，需要一级一级传递。

  1. 子组件直接使用父组件数据
    • 在子组件中，可以通过this.$parent来获取父组件的数据。例如：

   <template>
     <div>{{ this.$parent.str1 }}</div>
   </template>

   <script>
   export default {
     mounted() {
       console.log(this.$parent.str1);
     },
   };
   </script>

  • 这种方式子组件可以直接拿到父组件的数据，但与传统的传值方式不同，它不是通过父组件主动传递数据给子组件。而且这种方式写死了数据的获取路径，不便于维护。同时，子组件可以直接修改父组件的数据，这可能会导致数据的不可控性。

（二）子传父

  1. 自定义事件传值
    • 在子组件中，定义一个自定义事件，并在触发事件时将数据传递给父组件。例如：
   <template>
     <div>
       <button @click="sendDataToParent">点击传值给父组件</button>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         str2: 'list 组件的数据',
       };
     },
     methods: {
       sendDataToParent() {
         this.$emit('change', this.str2);
       },
     },
   };
   </script>

  • 在父组件中，通过监听子组件的自定义事件来接收数据。例如：

   <template>
     <div>
       <list @change="receiveDataFromChild"></list>
       {{ str2 }}
     </div>
   </template>

   <script>
   import list from './list.vue';
   export default {
     components: { list },
     data() {
       return {
         str2: '',
       };
     },
     methods: {
       receiveDataFromChild(value) {
         this.str2 = value;
       },
     },
   };
   </script>

  1. 父组件直接获取子组件数据
    • 父组件可以通过this.$children或this.$refs来直接获取子组件的数据，但这种方式不常用，因为通过下标获取子组件可能会因为子组件的顺序变化而导致问题，而且代码的可读性和可维护性较差。例如：
   <template>
     <div>
       <list ref="child"></list>
       <button @click="getChildData">获取子组件数据</button>
       {{ str2 }}
     </div>
   </template>

   <script>
   import list from './list.vue';
   export default {
     components: { list },
     data() {
       return {
         str2: '',
       };
     },
     methods: {
       getChildData() {
         this.str2 = this.$refs.child.str2;
       },
     },
   };
   </script>

（三）平辈之间传值

  • 通常使用bus（事件总线）的方式进行平辈组件之间的传值。创建一个工具类bus.js，用于实现全局的事件监听和触发。例如：
   import Vue from 'vue';
   export default new Vue();

  • 在发送数据的组件中，通过触发bus的事件将数据传递出去。例如：

   <template>
     <div>
       <button @click="sendDataToBrother">点击传值给兄弟组件</button>
     </div>
   </template>

   <script>
   import bus from './bus.js';
   export default {
     data() {
       return {
         str3: 'list 给兄弟的数据',
       };
     },
     methods: {
       sendDataToBrother() {
         bus.$emit('change', this.str3);
       },
     },
   };
   </script>

  • 在接收数据的组件中，通过监听bus的事件来接收数据。例如：
   <template>
     <div>{{ str3 }}</div>
   </template>

   <script>
   import bus from './bus.js';
   export default {
     data() {
       return {
         str3: '',
       };
     },
     mounted() {
       bus.$on('change', (value) => {
         this.str3 = value;
       });
     },
   };
   </script>

二、Vue3 中的组件传值方式

在 Vue3 中，组件传值的方式与 Vue2 有一些相似之处，但也有一些新的特性和变化。

（一）父传子

  1. props传值
    • 与 Vue2 类似，在父组件中通过属性绑定将数据传递给子组件，子组件通过props接收数据。例如：
   <template>
     <div>
       <child :data="parentData"></child>
     </div>
   </template>

   <script>
   import child from './child.vue';
   export default {
     components: { child },
     data() {
       return {
         parentData: '父组件的数据',
       };
     },
   };
   </script>


   <template>
     <div>{{ data }}</div>
   </template>

   <script>
   export default {
     props: {
       data: {
         type: String,
         default: '',
       },
     },
   };
   </script>

  1. provide和inject
    • 在 Vue3 中，可以使用provide和inject来实现跨层级的组件传值。例如：
   <template>
     <div>
       <child></child>
     </div>
   </template>

   <script>
   import child from './child.vue';
   export default {
     components: { child },
     provide() {
       return {
         parentData: '父组件提供的数据',
       };
     },
   };
   </script>


   <template>
     <div>{{ injectedData }}</div>
   </template>

   <script>
   export default {
     inject: ['parentData'],
     data() {
       return {
         injectedData: '',
       };
     },
     mounted() {
       this.injectedData = this.parentData;
     },
   };
   </script>

（二）子传父

  1. 自定义事件传值
    • 和 Vue2 类似，在子组件中通过触发自定义事件将数据传递给父组件。例如：

   <template>
     <div>
       <button @click="sendDataToParent">点击传值给父组件</button>
     </div>
   </template>

   <script>
   import { defineComponent } from 'vue';
   export default defineComponent({
     methods: {
       sendDataToParent() {
         this.$emit('change', '子组件的数据');
       },
     },
   });
   </script>


   <template>
     <div>
       <child @change="receiveDataFromChild"></child>
       {{ parentData }}
     </div>
   </template>

   <script>
   import child from './child.vue';
   import { defineComponent } from 'vue';
   export default defineComponent({
     components: { child },
     data() {
       return {
         parentData: '',
       };
     },
     methods: {
       receiveDataFromChild(value) {
         this.parentData = value;
       },
     },
   });
   </script>

  1. 使用ref获取子组件实例
    • 在 Vue3 中，可以使用ref来获取子组件的实例，从而直接访问子组件的数据和方法。例如：

   <template>
     <div>
       <child ref="childRef"></child>
       <button @click="getChildData">获取子组件数据</button>
       {{ parentData }}
     </div>
   </template>

   <script>
   import child from './child.vue';
   import { defineComponent, ref } from 'vue';
   export default defineComponent({
     components: { child },
     data() {
       return {
         parentData: '',
       };
     },
     setup() {
       const childRef = ref(null);
       const getChildData = () => {
         if (childRef.value) {
           this.parentData = childRef.value.childData;
         }
       };
       return {
         childRef,
         getChildData,
       };
     },
   });
   </script>


   <template>
     <div>{{ childData }}</div>
   </template>

   <script>
   import { defineComponent } from 'vue';
   export default defineComponent({
     data() {
       return {
         childData: '子组件的数据',
       };
     },
   });
   </script>

（三）平辈之间传值

  • 在 Vue3 中，平辈之间的传值仍然可以使用事件总线或者状态管理工具（如Pinia、Vuex）。

使用事件总线的方式与 Vue2 类似，创建一个全局的事件总线对象，在需要传值的组件中触发事件，在接收数据的组件中监听事件。

例如：

// bus.js
import { createApp } from 'vue';
export const bus = createApp({});


<template>
  <div>
    <button @click="sendDataToBrother">点击传值给兄弟组件</button>
  </div>
</template>

<script>
import { bus } from './bus.js';
export default {
  methods: {
    sendDataToBrother() {
      bus.$emit('change', '数据 from 组件 A');
    },
  },
};
</script>


<template>
  <div>{{ receivedData }}</div>
</template>

<script>
import { bus } from './bus.js';
export default {
  data() {
    return {
      receivedData: '',
    };
  },
  mounted() {
    bus.$on('change', (value) => {
      this.receivedData = value;
    });
  },
};
</script>

三、总结

组件传值在 Vue 应用开发中是非常重要的环节。无论是 Vue2 还是 Vue3，都有多种方式实现组件之间的数据传递。在实际开发中，应根据具体的业务需求和项目结构选择合适的传值方式，以保证代码的可维护性和可读性。同时，随着 Vue 的不断发展，新的特性和工具也为组件传值提供了更多的选择和优化的可能。

阿贾克斯的黎明
关注
专栏目录
vue组件传值方式
hahaha6hahah的博客
02-15 594
我们都知道 Vue 作为一个轻量级的前端框架，其核心就是组件化开发。Vue 就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。 但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。在 vue 中组件之间的关系有：父子，兄弟，隔代。针对不同的关系，怎么实现数据传递，就是接下来要讲的。 一、父组件向子组件传值 即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。 在
VUE父子传值非父子传值（组件通信：详解vue传值）
前端程序猿的博客
12-29 782
vue的组件传值详解以及例子
Vue组件传值详解
shadowfall的博客
12-29 449
Vue的组件传值 首先Vue我认为有几个最大的特点, 第一点数据驱动，无需手动操作dom。 第二点模块化开发MVVM模式 vNode虚拟dom diff算法    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么就需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式，并且在模块化开发时，一定是需要拆分的，也就是我们常用的路由以及组件等方式，所以衍生出了这个问题，如何进行组件之间的传值问题，又为什么必须要这么去做呢? 首先模块化开发，使用的是树形结
Vue组件通信：子组件向父组件传值（详解 & 代码示例）
热门推荐
qq_53322872的博客
07-07 1万+
文章主要讲述了父组件如何获取子组件的数据。笔者将其分为了”子组件主动发送”和“父组件主动获取”两种情景并配以详细的代码示例。
vue组件传值详解
weixin_45616142的博客
10-05 565
vue组件传值面试常问 1.父子传值： 父传子： 在父组件的子组件标签上通过v-bind绑定要传递的数据，然后在子组件内部通过props接收。 // 父组件 <select-list :dataList="dataArr" @parentReceive="changeVal"/> // 子组件 props: ['dataList'] 子传父： 在子组件中定义一个方法，然后在方法里面通过this.$emit进 行 传 递 ( emit进行传递(emit进行传递(emit有两个参
Vue 2 和 Vue 3 组件通信详解
qq_67572731的博客
09-03 1852
【代码】Vue 2 和 Vue 3 组件通信详解。
Vue组件间传值详解
月光晒了很凉快的博客
09-08 1461
（注意这里是自定义的属性名称，而不是父组件数据源中的数据名称）示例：
vue组件常用的11种通信方式详解
jastalented的博客
12-15 1476
vue中到底有哪些通信方式呢？让我们一起看看吧！vue组件间的通信方式有如下：props、自定义事件、全局事件总线、pubsub、vuex、ref和$parent、slot、provide和inject、pinia、v-modal组件通信详解
Vue组件通信详解
m0_63229717的博客
05-18 690
props是单向绑定的，当父组件传递的数据发生变化时子组件props也会更新为最新值。通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果。通过ref绑定组件可以通过this.$refs.name获取当前组件实例，可以使用组件的方法。（3）静态props传入的值不会发生变化，父组件中定义，子组件使用。子组件通过$emit事件给父组件传递值，父组件通过props属性传值给子组件。也就是：各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。
详解Vue组件之间通信的七种方式
10-17
本文将详细介绍Vue组件间通信的七种方式，通过实例代码演示每种方式的用法，具有较高的参考价值。 首先，最基础的通信方式是通过props和$emit。props是父组件向子组件传递数据的途径，子组件通过声明props属性接收...
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
11-20
Vue提供了多种方式来处理组件间的数据交换，包括父子组件通信、爷孙组件通信以及兄弟组件通信。下面我们将深入探讨这些通信方式。 **父子组件通信** 在Vue中，父子组件间的通信主要通过`props`和`$emit`来实现。父...
详解vuejs几种不同组件（页面）间传值的方式
10-19
Vue.js是一种构建用户界面的渐进式框架，它...无论是简单的父子组件传值，还是复杂的全局状态管理，Vue.js都能提供合适的解决方案。开发者应根据实际情况选择最适合的方法来组织代码，以达到最佳的开发效果和性能表现。
如何搭建Vue脚手架
w6437286的博客
09-26 494
本文主要讲解如何搭建vue脚手架。
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 262
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
最新发布
2301_77012231的博客
10-01 278
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 478
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
深入理解 Nuxt.js 中的 app:data:refresh 钩子
09-29 1292
钩子在数据被刷新时触发，可以选择性地传入要刷新的键名（keys）。这为开发者提供了一个灵活的机制来响应数据变化，并进行必要的更新。Nuxt.js 中的钩子的用途及其实现方法。这个钩子为开发者提供了一种灵活的方式来处理数据的更新，从而优化应用的响应性和用户体验。
前端规范工程-2：JS代码规范（Prettier + ESLint）
Vinca@的博客
09-26 789
Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值