vue3 组件之间传值

最新推荐文章于 2024-05-22 10:04:18 发布
最新推荐文章于 2024-05-22 10:04:18 发布
阅读量560 收藏
点赞数
分类专栏： vue的一些使用技巧 文章标签： vue.js javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengxiaopeng74/article/details/120484010
版权

有时候两个组件之间并非子父组件可能是父辈组件像孙辈组件传值（不知道怎么说能懂就好了）又该怎么传呢？ 

由于想使用vue2中的watch 监听来实现但是没有找到案例和方法，开发时间短没有过多的去尝试，还是多使用vue3的更容易对新的技术有所了解所以使用了新的语法

provide 和  inject

 使用的时候最好使用快捷键每次不管定义变量还是使用vue的方法都需要申明，所以我们为了开发快捷直接快捷键

传值的组件：

这个案例是我在父页面需要点击操作了子页面对应的显示隐藏，为什么我不直接把provide 放到if  else 里面这也是我踩得一个小坑，vue会提示不可以这么写事实上我们写一个就可以了，他会自己去监听只要反生变化接受的组件里面也会发生变化

接受的组件：

 接受的组件中直接写 inject来根据你要接受的变量名获取就可以了

小皮皮不皮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 的组件传值
jia632133535的博客
03-01 778
<template> <div class='mypage'> <div class="demo-pagination-block"> <el-pagination v-model:currentPage="pagenum" v-model:page-size="pagesize" :page-sizes="[1, 2, 3, 4]" .
vue 组件之间传值
热门推荐
lx_1024的博客
01-19 1万+
vue组件间传值分为父组件给子组件传值和子组件给父组件传值一、父组件给子组件传值父组件中引入子组件，父组件的js里定义要传递的属性值，下面的写法是动态的传递，name可以通过定义方法，在方法里动态修改，如不需要动态的传递，则直接使用属性定义值parent.vue&lt;template&gt; &lt;child v-bind:name="name"&gt;&lt;/child&gt; &l...
vue3非父子组件间传值
djh052900的博客
02-16 564
vue3兄弟组件间传值
两个没有关系的组件传递参数---bus
qq_45327886的博客
11-23 1631
两个没有关系的组件传递参数---bus方式
Vue3组件开发及组件之间传递数据
最新发布
weixin_44201223的博客
05-22 443
组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。首先，在父组件中定义需要传递给子组件的值，接着，在父组件的模板中引入子组件，同时在引入子组件的标签中添加 props 属性并为其设置需要传递的值。在 Vue3 中，父组件通过 props 传递给子组件的值是响应式的。也就是说，如果在父组件中的传递的值发生了改变，子组件中的值也会相应地更新。//2.出发父组件对应的方法，调用defineEmites对应的属性。组件化：对js/css/html统一封装,这是VUE中的概念。
Vue组件通信【父传子、子传父、兄弟传值、无关系组件之间通信】
带刺玫瑰的博客
12-06 697
1、父传子 子组件 <template> <div>{{content}}<div> </template> export default{ props:["content"] data(){ return{content} }, methods:{ init(){ this.content=this.$props.ElDialogList.title; } } } 父组件 <template> <div @
vue3组件传参
feng4175的博客
06-06 248
vue3的不相关组件传参与vue2类似且不同，在vue3中，通过下载安装mitt实现，这里使用了npm i mitt -s 进行安装。Bus.emit('givemassage','我是要传递的值') //这里可以写在函数中，也可以写在生命周期中。conosle.log(res)//这里的res其实就是：我是要传递的值。
VUE关于不同组件之间传值的方法
qwq2867309085qwq的博客
06-08 647
VUE关于不同组件之间传值的方法
vue实现组件之间传值功能示例
10-18
总结来说，Vue组件之间的数据传递主要包括以下几种方式： 1. 父组件通过`props`向子组件传递数据。 2. 子组件通过触发事件并向事件携带数据来向父组件传递信息。 3. 使用`slots`允许父组件向子组件插入动态内容。 ...
vue3父子组件传值.doc
02-05
vue3父子组件传值
深入理解Vue 组件之间传值
10-18
本文将深入探讨Vue组件间的数据传递，包括父组件向子组件传递数据、子组件向父组件传递数据以及子组件之间的间接通信。 一、父组件向子组件传递数据 Vue中，最常用的数据传递方式是通过props（属性）。在子组件中...
vue2.0组件之间传值、通信的多种方式(干货)
01-21
这次我们就来聊一聊vue2.0组件之间传值、通信的多种方式。 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等） this.$router.push({ path: '/...
Vue非父子组件之间传值
01-08
然而，在实际应用中，我们常常需要非父子组件之间进行通信。由于Vue的单向数据流原则，直接修改父组件的值在子组件中是不被推荐的，因此需要采取其他方法来实现实现组件间的数据传递。这里介绍的就是使用“Bus”（或...
开发笔记--Vue中不同组件的传值的几种方法
weixin_45647394的博客
04-14 1089
父子组件传值 1、父传子 思路：父组件传值到子组件中，使用props进行传值 //子组件 <template> <div> </div> </template> <script> export default{ name:'childComponent', data:{ return { //写法一 props:{
VUE组件之间相互传值的方式
qq_45812595的博客
08-09 460
Vue 就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。 但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。在 vue 中组件之间的关系有：父子，兄弟，隔代。 一、父组件向子组件传值 即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。 在父组件的子组件标签中绑定自定义属性 // 父组件 <user-detail :myName="name" /&gt
【Vue3 第十六章】非父子组件间传值
前端知识分享喵
02-01 1109
非父子组件传参
VUE3-组件之间传值《四》
故里2130
12-21 4947
组件之间的传值，分为3种方式。
【Vue组件传值】不同的组件之间的数据传值方法
Jayliu_core的博客
08-04 2221
不同的组件之间的数据传值方法 父组件向子孙组件传值、通过方法provide / inject （1）provide/inject的介绍： provide/ inject 是vue2.2.0新增的api ，这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 （2）provide/inject的使用： provide 提供变量：Object | () => Object 翻译过来的意思是：provide 选项
VUE两个不相干组件如何传参
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
07-19 1734
现在A组件页面的查询方法，例如。
vue兄弟组件之间传值
05-09
Vue组件之间传值有多种方式，其中兄弟组件之间传值可以通过以下几种方式实现： 1. 通过父组件传递数据 在父组件中定义一个数据，在子组件中通过props接收，在兄弟组件之间传递数据时，可以将数据传递给父组件，由父组件再将数据传递给另一个子组件。 2. 通过事件总线传递数据 创建一个空的Vue实例作为事件总线，通常在main.js中创建，然后可以在兄弟组件中通过事件总线$emit触发事件，另一个兄弟组件中通过事件总线$on监听事件，从而实现兄弟组件之间的数据传递。 3. 通过Vuex进行状态管理 使用Vuex对应用程序进行状态管理，将需要共享的数据存储在Vuex的store中，兄弟组件可以通过Vuex读写store中的数据，从而实现兄弟组件之间的数据传递。 综上所述，以上三种方式都可以实现兄弟组件之间的数据传递，具体选择哪种方式取决于实际应用场景和个人喜好。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值