vue 同页面不同组件数据传递

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量1.3k 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5b9b657d5188255c3b7d764d
版权

不用 vuex 同页面不同组件数据传递，用vuex的这篇文章可以忽略！ 直接举例： 一个页面有两个组件，其中组件A的数据可以传递到组件B,同理组件B的数据可以传递到组件A, 即AB两个组件可以互相传递数据。 有图有真相： 第一步：创建一个组件A

第二步：创建一个组件B

第三步：创建一个页面pageA，并在页面A中分别引入两个组件A、B

第四步：在main.js中，在vue的原型上加一个$bus的属性,(原因可以查其他资料，这里只说明怎么用)

第五步：使用场景，A组件中的某个点击事件触发数据传递，所以在A组建中写上click事件，在事件中写上 this.bus.emit("busTest", obj)，其中busTest,是事件的名称，obj是要传递的数据

第六步：在组件B中接收数据，并显示出来

第七步：代码完成了，看页面效果

weixin_33968104
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue组件间数据共享
weixin_42029090的博客
06-24 4357
在一些 Vue 前端项目中，一个页面可以看作是由一些子组件拼装成的。但经常一些数据在多个组件中都要用到，并且要保证数据的实时更新。因此需要解决数据在各个组件间共享。常规思路有两个，一个是设置全局变量，另一个是进行变量传递和监听。 使用 Vuex Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 看官方文档。 组件间数据传递 最基本的是父-子组件数据传...
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
10-16
今天小编就为大家分享一篇vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue组件之间通信(传递数据)的五种方式
xllllll___的博客
03-02 754
（1）.父传子：通过自定义属性来进行传值 (2).在父组件中使用子组件的时候，给父组件添加自定义属性，属性值为传递的数据 (3).在子组件通过使用props接受父组件的数据，props值为一个数组，元素是自定义属性 (4).在子组件中使用传递的数据时与data数据一样代码示例如下：父组件中: 子组件中: 二.子传父 1.步骤: (1).在父组件中定义修改方法，需要传递的参数 (2).在使用子组件
玩转Angular系列：组件间各种通信方式详解
weixin_41394875的博客
03-02 621
在前端框架Angular中，组件之间的通信很基础也很重要，不同组件间的通信方式也不同，掌握组件间的通信方式会更加深刻的理解和使用Angular框架。
Vue - 组件间的数据通信（数据传递/共享）
weixin_41606115的博客
02-14 209
一种组件间通信的方式，适用于：子组件 ===> 父组件使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中 ）。绑定自定义事件：第一种方式，在父组件中： 或 ......mounted(){若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。触发自定义事件：this.$emit('atguigu',数据)
Vue2(组件A的方法中的数据传递给另一个组件B)
weixin_51181851的博客
07-19 89
（VUE2）组件A的方法中的数据传递给另一个组件B
Vue之组件化开发和vue接口调用
weixin_45651869的博客
08-19 1904
标题1 组件注册 全局组件注册Vue.component 示例代码： Vue.component('my-cart',{ data:function(){ return {返回的是组件中使用的数据} }, template:`<h1>这是组件的模板结构</h1>` }) 参数分析： data：必须是一个带有return返回值的函数，return返回的是一个对象，对象中是template模板中要使用的数据 template模板：使用模板字符串包裹比较好，里面是组
vue组件之间的数据共享
热门推荐
黄钢的博客
10-10 2万+
前期写项目时，无论项目大小，都是用的vuex来实现的数据共享，随着学习的深入，发现使用vuex有点大材小用了。一般情况下，vuex适合大型项目、组件结构复杂的项目实现数据共享，vuex无视组件的父子、兄弟关系，只要在store中进行了注册，所有的组件都可以共享，但是也会存在一些问题，比如刷新页面会导致一些信息丢失的问题，虽然能解决，但也挺麻烦。通过学习，了解了更简单的组件间传递数据的方法，记录一下。
VUE3+TS（父子、兄弟组件通信）
Johnson_7的博客
07-21 1万+
VUE3+TS（父子、兄弟组件通信）
vue---父组件获取子组件的值（子组件多个值）
qq_46617584的博客
10-27 2658
vue---父组件获取子组件的值（子组件多个值）
开发笔记--Vue中不同组件的传值的几种方法
weixin_45647394的博客
04-14 1070
父子组件传值 1、父传子 思路：父组件传值到子组件中，使用props进行传值 //子组件 <template> <div> </div> </template> <script> export default{ name:'childComponent', data:{ return { //写法一 props:{
vue2.0 父组件给子组件传递数据的方法
08-28
在父组件 App.vue 中引用子组件 A.vue，把 name 的值传给 A 组件。这篇文章主要介绍了vue2.0 父组件给子组件传递数据的方法,需要的朋友可以参考下
vue父组件向子组件(props)传递数据的方法
11-29
vue页面结构 在做项目的时候常常有这样的一个情况，这个页面的数据（比如：id号）要带到另一个页面去查询某个数据的详情等，传统的作法不是在url上加参数，cookie或者是现在H5的“sessionStorage”和“localStorage...
Vue表单类的父子组件数据传递示例
01-21
在这里记录一下我平时常用的处理方式，这篇文章主要记录父子组件间的数据传递，非父子组件主要通过Vuex处理，这篇文章暂时不作说明。 与文档里给的方案一样，父组件向子组件传递数据主要通过 props，子组件向父组件...
Vue.js实战之组件之间的数据传递
12-12
必须使用特定的方法才能实现组件之间的数据传递。 首先用 vue-cli 创建一个项目，其中 App.vue 是父组件，components 文件夹下都是子组件。 一、父组件向子组件传递数据 在 Vue 中，可以使用 props 向子组件传递...
解决Vue中 父子传值 数据丢失问题
12-10
在Vue中，父子组件传值，子组件通过props接收父组件传递的...这种情况下会出现这么一个情况，刷新页面之后子组件接收的父组件数据会丢失，我们可以在watch里面去监听一下数据的变化。 重新对数据进行想要的处理，之
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 496
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
element-ui的bug记录
nick_zhang的博客
04-29 386
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 810
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
vue 页面向组件传递数据
06-11
在 Vue 中，向组件传递数据可以通过 Props 属性来实现。具体步骤如下： 1. 在父组件中定义要传递的数据，例如： ```javascript <my-component :message="hello"></my-component> import MyComponent from...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值