vue2.0组件之间传递数据

已于 2022-01-28 16:55:31 修改
阅读量892 收藏
点赞数
分类专栏： 学习笔记 文章标签： vue.js 前端
于 2022-01-28 14:41:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Theman_6/article/details/122731134
版权

vue2.0组件之间传递数据

一，父向子

当父组件向子组件传数据的时候用这种方法比较简单。步骤为：

1，在子组件中声明props

在这里插入图片描述

2，在父组件中使用子组件时传入数据

在这里插入图片描述

二，组件之间

在组件之间如果两个组件之间的关系很远可以使用这种方法。

1，首先声明一个工具js命名为eventBus.js

在这里插入图片描述

在eventBus.js里面先导入vue在共享一个vue实例。

2，在发送方导入eventBus.js

在这里插入图片描述

使用.$emit方法传值。

3，在接收方使用on接收

在这里插入图片描述

on方法一般直接放在created里

Theman_6
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.0组件传值
tangkebo的博客
01-16 180
vue是基于数据驱动，主要关注数据动态变化的过程即可。 先放完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
vue2.0组件间传值的方法汇总
weixin_34075551的博客
08-08 103
1、组件间的传值 1.1 父组件向子组件传值 子组件自定义一个属性 父组件通过自定义属性绑定值 子组件调用自定义属性来拿到值 1.1 完） 1.2 子组件向父组件传值 子组件自定义一个事件 父组件通过自定义事件绑定一个方法来接收值...
Vue 2.0学习笔记：组件数据传递
W3cplus
02-08 411
通过上一节中的学习，咱们了解了在Vue中怎么创建组件和使用组件。在项目中使用组件，目的一般就是提高代码复用率，增强模块化，从而降低开发成本。在文章结尾处，我们提到了Vue中组合组件，就是A组件中包含了B组件。而组件与组件之间的相互使用避免不了数据之间的传递。那么Vue中组件的数据是如何传递的呢？这就是这一节将要了解和学习的内容。首先要说明，组件数据传递不同于Vue全局的数据传递，组件实例的数据作用
VUE2.0组件之间的传值
huang100qi的专栏
09-13 708
Vue1.0组件间传递 　　使用$on()监听事件； 　　使用$emit()在它上面触发事件； 　　使用$dispatch()派发事件，事件沿着父链冒泡； 　　使用$broadcast()广播事件，事件向下传导给所有的后代 Vue2.0后$dispatch()，$broadcast()被弃用，见https://cn.vuejs.org/v2/guide/migration.htm
vue2.0中组件传值的几种方式
beekim的博客
02-10 2083
搭建好测试环境 app.vue <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <child></child> </div> </template> <script> i
Vue2.0组件间数据传递示例
08-31
Vue2.0组件间数据传递是指在父子组件之间传递数据的过程，这种传递方式在实际开发中非常常见。下面我们将详细介绍Vue2.0组件间数据传递的实现方式。 一、父组件向子组件传递数据 在Vue2.0中，父组件可以通过 props...
vue2.0 父组件给子组件传递数据的方法
08-28
在父组件 App.vue 中引用子组件 A.vue，把 name 的值传给 A 组件。这篇文章主要介绍了vue2.0 父组件给子组件传递数据的方法,需要的朋友可以参考下
vue2.0父子组件间传递数据的方法
10-18
在Vue 2.0中，父子组件间的...1. **属性(props)**: 父组件向子组件传递数据，这是通过props实现的。在`parent.vue`文件中，我们创建了一个名为`child-msg`的prop，并将其绑定到子组件的`child-msg`属性上： ```html ...
Vue2.0实现组件之间数据交互和通信操作示例
10-16
在Vue2.0之前，开发者可能会使用`$dispatch`和`$broadcast`来实现父子组件以及兄弟组件之间的通信，但这两个方法在Vue2.0中已经被废弃。Vue2.0提供了多种替代方案来处理组件间的数据交互，如 Props、Event Bus、Vuex...
vue2.0组件之间传值、通信的多种方式(干货)
01-21
这次我们就来聊一聊vue2.0组件之间传值、通信的多种方式。 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等） this.$router.push({ path: '/...
Vue2.0中组件之间的数据共享
GTW、Zeus的博客
12-03 420
组件之间的数据共享 父子组件之间的数据传递 父组件向子组件共享数据，要使用自定义属性 // 父组件 <Son :msg="message" :user="userinfo"></Son> // 使用子组件，通过属性向子组件传值，可以是任意值、方法，甚至是父组件对象this // 注意：这里如果没用v-bind，则传递的是字符串message和userinfo // 注意：age="18" --> 表示传入的age是一个字符串18；:age="18" --> 表示传入
「VUE架构」VUE2.0 父组件传值子组件
AIGC大前端小王子
05-29 1129
本文主要介绍VUE2.0父组件像子组件传值 1.首先父组件要引入子组件，然后通过传值:data=data的形式传参，其中第一个data表示子组件接收的数组名，可以是字符串、布尔值、JSON对象等形式，第二个data则是父组件的对象参数。(data不是唯一，可以自定义，下文案例用food表示) 引入子组件JS关键代码如下： &lt;script&gt; import CartC......
vue2传值方式总结 （十一种方法）
qq_70703397的博客
08-10 8363
通过parent可以获父组件实例 ，然 后通过这个实例就可以访问父组件的属 性和方法 ，它还有一个兄弟parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟root，可以获取根组件实例。（2）在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的。（1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法 ​。
vue2组件之间传值（数据共享）
努力的nana
03-10 5228
1.父组件向子组件传值： ①在父组件中使用v-bind进行属性绑定 ②在子组件中使用props进行数据接收 2.子组件向父组件传值： ①在子组件中使用v-on进行事件绑定，使用$emit发送数据 ②在父组件中自定义事件用于接收传过来的值，使用$on接收数据 3.兄弟组件之间传值：EventBus ......
Vue2.0 子组件传值给父组件
zeroone001的专栏
03-31 3万+
this.$emit(event,...args); /* * event: 要触发的事件 * args: 将要传给父组件的参数 */ Usage： 子组件内容：<template> <div @click="iclick"></div> </template> methods:{ iclick(){ let data = { a:'data
vue 组件传值
小傲哥哥的博客
04-21 4830
前言：在我们vue项目中组件传值大致可以分为三大类，1、子组件传值给父组件，2、父组件传值给子组件，3、兄弟组件之间传值； 1、父组件传值给子组件： 1.1、定义父组件 //父组件 //引入的add-widget组件 //使用 v-bind 的缩写语法通常更简单： <add-widget :msg-val="msg"> //这里必须要用 - 代替驼峰 // HTML 特性是不区分大小写...
vue2.0兄弟组件传值
lifangfang0607的博客
05-07 1405
A组件和B组件是兄弟组件，A向B传值 借助Bus.js来传值 A组件通过事件触发，使用 $emit() 来传值 <script> // 引入公共的bus，来做为中间传达的工具 import Bus from '@/bus.js' export default { data () { return { elementValue: 4 ...
Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值
热门推荐
华世中国的博客
01-09 34万+
Vue2.0 传值方式：在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。先给大家介绍Vue常见的三种传值方式
TypeScript的接口
weixin_50379372的博客
06-24 147
TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约......
vue2.0父子组件传递函数
最新发布
09-01
在Vue2.0中，父子组件之间可以通过props属性和$emit方法进行函数的传递。 首先，在父组件中，通过props属性将函数传递给子组件。在父组件中定义一个函数，然后将它添加到子组件的props中。例如： ```js // 父组件 <template> <div> <child-component :childFunction="parentFunction"></child-component> </div> </template> <script> export default { methods: { parentFunction() { // 在父组件中定义的函数 } } } </script> ``` 然后，在子组件中，通过this.$emit方法将其作为事件，从而调用父组件中的函数。在子组件中通过$emit方法触发一个事件，并将需要传递的参数传递给父组件中的函数。例如： ```js // 子组件 <template> <div> <button @click="childFunction">点击按钮</button> </div> </template> <script> export default { props: { childFunction: { type: Function, required: true } }, methods: { childFunction() { this.$emit('child-function'); } } } </script> ``` 最后，在父组件中，监听子组件的事件，并调用相应的处理函数。在父组件中通过v-on指令监听子组件触发的事件，并在相应的处理函数中调用父组件本身的函数。例如： ```js // 父组件 <template> <div> <child-component :childFunction="parentFunction" @child-function="handleChildFunction"></child-component> </div> </template> <script> export default { methods: { parentFunction() { // 在父组件中定义的函数 }, handleChildFunction() { // 处理子组件触发的事件 } } } </script> ``` 通过上述的方式，就可以在Vue2.0中实现父子组件之间的函数传递。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值