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

最新推荐文章于 2022-10-27 22:07:29 发布
最新推荐文章于 2022-10-27 22:07:29 发布
阅读量1.4k 收藏 2
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5b9b657d5188255c3b7d764d
本文介绍在Vue项目中，如何在不使用Vuex的情况下实现同一页面内不同组件间的通信。通过实例展示，如何利用Vue的原型属性$bus进行事件触发和数据传递，实现组件A与组件B之间的数据交互。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

不用 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中接收数据，并显示出来

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

《web开发： Vue 组件间数据交互》
yexiang优快云的专栏
02-23 266
一、Vue 组件间数据交互 1. 组件内部通过props接收传递过来的值 Vue.component(‘menu-item', { props: ['title'], template: '<div>{{ title }}</div>' }) 2. 父组件通过属性将值传递给子组件 <menu-item title="来自父组件的数据"></menu-item> <menu-item :title="title"></menu-it..
【Vue自学笔记】组件间数据传递
最新发布
qq_35712802的博客
08-03 897
父组件可以改，并且父组件改了之后所有子组件的这个值都会跟着改，单向传递。Vue的单向数据流指的是，数据在父组件中被定义和更新，然后通过props的形式传递给子组件，子组件可以读取这些props，但不能直接修改它们。如果父组件的数据在子组件中能够被更改，那子组件再传给子子组件，如果子子组件再做更改，那是不是每个拿到这个数据的组件都要去更新这个值呢…刚开始看这个名词，可能会认为是：数据只能够从父组件传到子组件，而不能从子组件传到父组件。的指向，Vue 是监测到的，按照单向数据传递原则是不给的，保护数据！
vue中在不同的组件传递参数
hurley11的博客
10-31 632
1，A组件引入B组件 <script> import B from '../components/B.vue' export default { name: "A", components:{B}, data(){ return{ pass_data: '', } }, 2，A组件页面传递参数,把pass_data的数据传给B &lt.
vue组件之间的数据共享
热门推荐
黄钢的博客
10-10 2万+
前期写项目时，无论项目大小，都是用的vuex来实现的数据共享，随着学习的深入，发现使用vuex有点大材小用了。一般情况下，vuex适合大型项目、组件结构复杂的项目实现数据共享，vuex无视组件的父子、兄弟关系，只要在store中进行了注册，所有的组件都可以共享，但是也会存在一些问题，比如刷新页面会导致一些信息丢失的问题，虽然能解决，但也挺麻烦。通过学习，了解了更简单的组件间传递数据的方法，记录一下。
vue 同页面不同参数
weixin_30693183的博客
09-04 657
项目：详情页中有一个模块为更多产品，点击也是跳转到详情页，也就是相同路由，不同参数。 试过的方法：用this.$router.push,并没有任何反应，没有任何请求，页面也未重新加载，用this.$emit通知父组件刷新，可以请求数据，但是url后面的activityId的值并未改变，显然不是我想要的效果。 解决：直接简单粗暴window.location.href="/frontPage/que...
vue组件间传递(多用于同一页面组件之间)
yangchuangxyz的博客
08-24 1127
1.父组件传递数据给子组件 父组件中：parent.vue &lt;child :city="北京"&gt;&lt;/child&gt; 子组件中接收city:child.vue props:{city:String}   2.子组件传值给父组件 子组件中:child.vue 子组件script中：this.$emit("name"，“李白”) 父组件中:parent.vue &...
使用vue-router在Vue页面之间传递数据的方法
10-16
以上就是使用vue-router在Vue页面间传递数据的基本方法，以及在实际应用中需要注意的一些问题。希望本文的内容能够帮助到正在使用Vue框架的开发者们，让大家在开发单页应用时能够更加顺畅和高效地在各个页面间传递...
vue2.0 父组件给子组件传递数据的方法
08-28
在父组件 App.vue 中引用子组件 A.vue，把 name 的值传给 A 组件。这篇文章主要介绍了vue2.0 父组件给子组件传递数据的方法,需要的朋友可以参考下
vue父组件向子组件(props)传递数据的方法
08-28
在实际项目中，经常会遇到这样的情况：当我们在一个页面上输入某些数据时，需要将这些数据传递到另一个页面上以便查询某些数据的详情。传统的做法是通过 URL 参数、cookie 或者是现在 H5 的“sessionStorage”和...
Vue组件间数据共享
weixin_42029090的博客
06-24 4597
在一些 Vue 前端项目中，一个页面可以看作是由一些子组件拼装成的。但经常一些数据在多个组件中都要用到，并且要保证数据的实时更新。因此需要解决数据在各个组件间共享。常规思路有两个，一个是设置全局变量，另一个是进行变量传递和监听。 使用 Vuex Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 看官方文档。 组件间数据传递 最基本的是父-子组件数据传...
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
10-16
今天小编就为大家分享一篇vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2几种不同组件（页面）间传值的方式
mrhaoxiaojun的博客
09-20 1975
在应用复杂时，推荐使用vue官网推荐的vuex，以下讨论简单SPA中的组件间传值。一、路由传值 　　在跳转页面的时候，在js代码中的操作如下，在标签中使用标签 this.$router.push({ name: 'routePage', query/params: { routeParams: params } }
开发笔记--Vue中不同组件的传值的几种方法
weixin_45647394的博客
04-14 1171
父子组件传值 1、父传子 思路：父组件传值到子组件中，使用props进行传值 //子组件 <template> <div> </div> </template> <script> export default{ name:'childComponent', data:{ return { //写法一 props:{
Vue之组件化开发和vue接口调用
weixin_45651869的博客
08-19 2108
标题1 组件注册 全局组件注册Vue.component 示例代码： Vue.component('my-cart',{ data:function(){ return {返回的是组件中使用的数据} }, template:`<h1>这是组件的模板结构</h1>` }) 参数分析： data：必须是一个带有return返回值的函数，return返回的是一个对象，对象中是template模板中要使用的数据 template模板：使用模板字符串包裹比较好，里面是组
VUE3+TS（父子、兄弟组件通信）
Johnson_7的博客
07-21 1万+
VUE3+TS（父子、兄弟组件通信）
vue---父组件获取子组件的值（子组件多个值）
qq_46617584的博客
10-27 2871
vue---父组件获取子组件的值（子组件多个值）
【通俗易懂】vue同一个页面复用同一个组件多次，如何让组件的内容显示不一样
seeeeeeeeeee的博客
10-09 1万+
我今天遇到的需求是首页可以自定义显示什么。我是后台系统，首页四个模块，然后四个模块要再设置页面里可以配置，每个模块显示什么类型的，还有顺序都可以改，那我就想到了动态组件，我直接写了四个组件，然后首页用动态组件把组件放在对应模块内，这不就成了。 然后经理又跟我说让选择模块的时候让用户可以点击规格模块时选择不同规格，其他的模块不用，我就给规格模块加了个可以选规格的下拉框，然后我一寻思，那这就需要我同一个组件在同一个页面上的四个模块内根据规格不同显示不同数据，因为用户很可能会自定义设置四个块都显示规格。 默认的是
Vue 组件与父页面间数据同步
松鼠的一巴掌
03-11 859
该描述用于解决直接修改传入的props元素触发的报错。 在父页面中，给组件传入了数据。 在组件中通过props中接收，并将其赋给data中的元素，将其显示在页面上。 在子组件中的数据如果修改，则其会触发自定义事件，被父页面处理，并被处理更新，传入子组件的元素也被更新。 传入给子组件的数据更新后，触发监听将当前值赋予data中的元素，使现实的结果为传入值。 ...
Vue 02- Vue如何实现数据共享
weixin_57519357的博客
09-25 2274
Vue如何实现数据共享。
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、付费专栏及课程。

余额充值