Vue实践之项目积累------组件之间的传值（父子、子父、兄弟及任意）

最新推荐文章于 2023-09-05 07:29:01 发布
最新推荐文章于 2023-09-05 07:29:01 发布
阅读量280 收藏
点赞数
分类专栏： # Vue.js 文章标签： Vue实践 传值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/refreeom/article/details/97879803
版权

在实际应用中，vue的传值就像是人每天要吃的饭一样，是一个避无可避的东西。往大了说组件之间的传值就是任意组件之间的通信，往小了说组件之间的传值可分为父传子，子传父，以及兄弟之间。

父传子

父传子从传统意义上父亲把已有的东西留给自己的儿子，儿子这里叫继承。在vue中，父组件首先的有值，也就是说父组件是产生值的地方，其次父组件中要有子组件，所有子组件在父组件中注册，明确父子关系；之后在子组件上注册一个值，用于传递的凭证，也就是传统意义上父亲留给儿子的东西，这个东西所在了。父组件的工作到这里就结束了，接下来就是子组件的接收问题；子组件用于接收的容器是prop，将从父亲那拿到的东西放入prop,这样这个值就可以被子组件运用了，某种意义上来说也就是子组件的东西了。以上语言翻译成计算机语言就是：

子传父

子传父是指儿子将自己的方法或者值传递到父亲处，同样在父亲处进行接收，并处理；儿子是利用$emit这个属性，父亲则是利用$on这个属性

兄弟组件及任意

兄弟组件有两种处理方式：一是先子传父再父传子；二是人为的添加一个梯子，即一个新的Vue对象做介质，在兄弟组件中同时引入这个介质，值或方法产生的地方用$emit这个方法，接收的一方用$on这个方法

Emily Qin
关注
专栏目录
vue2 组件传值：父传子props
全易
07-07 5499
一、基本传值： 1.在父组件只需有一个操作，如下： 2.然后在子组件有两个操作，如下： 父传子的基本传值就完事啦 看效果： 二、指定类型传值 就是指定传来的值是数字、对象、字符串、、、 首先在父组件上有两步操作，如下图： 在基本传值的基础上绑定成动态传值 然后在子组件上也有两步操作，如下： 效果如下： ...
【前端--Vue】组件之间的多种通信方式，一文彻底搞懂组件通信！
最新发布
共同学习，共同成长
05-07 6849
本篇将重点讲解vue中的多种组件通信方式，包括【父传子】【子传父】【兄弟组件通信】【依赖注入】等等，并提供具体案例来让小伙伴们加深理解、彻底掌握！
Vue 中父传子组件传值，开发项目中总会遇到这样或那样的坑，作为前端小白，每天都在填坑中度过。。。
weixin_43962555的博客
03-14 214
第一种情况： 简单传值，子组件只负责显示； 父组件向子组件传递一个hello word; 子组件接收并显示出来； 父组件Father.vue <template> <div id="app"> <Child :msg = "message"/> </div> </template> <script&a
Vue父子组件传值
weixin_42113716的博客
09-05 272
Vue父子组件传值
vue中组件间传值的方法？
weixin_44759289的博客
03-05 185
vue中组件间传值是通过props来传递的，他需要使用属性绑定的语法，把要从VM身上传递过来的数据，绑定到组件身上，这个绑定的代码要写在HTML中。具体案例如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...
Vue组件间传值（父子、子父、兄弟）
young1219的博客
04-26 297
父组件给子组件传值——props 在父组件内引入子组件，在子组件的标签内利用v-bind（即:）来传递数据， //这里是父组件 <template> <div id="parent"> <child :dataName='dataName'/> </div> </template> <script> impor...
vue组件开发小demo（主要涉及子父组件的相互调用）
Dxmonster的博客
10-15 266
vue组件开发小demo（主要涉及子父组件的相互调用） 父组件按钮，点击后获取子组件data后alert 子组件按钮，点击后获取父组件data后alert 对于后端开发写页面来说，我觉得会有很大帮助，具体讲解代码注释写的挺全，可以看代码 父组件代码 <template> <!--template标签内一定要包一层div，不然会报错，原谅vue刚刚学，不是很懂--> <div id="Wrapper"> <!-- Ivivew框架按钮标签 --&g
开发笔记--Vue中不同组件的传值的几种方法
weixin_45647394的博客
04-14 1129
父子组件传值 1、父传子 思路：父组件传值到子组件中，使用props进行传值 //子组件 <template> <div> </div> </template> <script> export default{ name:'childComponent', data:{ return { //写法一 props:{
Vue和React组件之间的传值方式详解
10-17
- React中，兄弟组件之间的通信也需要通过共同的父组件进行，父组件接收一个函数作为`props`，子组件调用这个函数，通过回调传递数据。 3. **多层级组件通信**： - Vue提供了`provide/inject`特性，允许祖先组件...
vue3+ts+vite项目三种形式父子组件传值的方法（setup(){}、script-setup语法糖、provide和inject）
m0_54852350的博客
03-06 503
废话不多说直接上问题，这是最近项目上遇到的一个关于definedProps和context传值的方法，文章仅作记录，欢迎大佬指点。 在vue3中setup有一种简洁式写法Vue3的语法糖先来说说在常规的setup(){}中怎么去父子传值吧，最近这个项目踩了个坑，没有注意到使用的是setup(){}写法直接去使用了definedProps和definedEmits导致程序一直报错最后也是细心检查找到了问题所在，setup(){}中使用的是context，而1.setup(){}子传父 子组件 <temp
VUE儿子组件给爸爸组件传值
Sakura1998gis的博客
11-20 379
不知道怎么转载，把这个网页存一下- - https://blog.csdn.net/weixin_38888773/article/details/81902789
vue子组件与父组件之间的传值
mossbaoo的博客
04-28 1479
【vue子组件与父组件之间的传值】在子组件与父组件之间的通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。
vue组件之间的传值-父与子的传值 子组件传值父组件 兄弟组件之间的传值。
zyl9857的专栏
04-13 334
子组件和父组件的传值 父组件： <template> <!-- html界面 必须有主DIV包裹 --> <div> <h1>我是父组件----子组件在下面</h1> <v-son title="我是父组件" message="交给你一项任务"></v-son> </d...
vue组件的五种传值方法(父子\兄弟\跨组件)
pckzzy108的博客
08-22 3245
子组件向父组件传数据使用自定义事件， vue 组件提供了一个emit(‘自定义事件名’， 传递的数据) )，子组件传递数据时，触发响应的事件函数，就会自动触发通过$emit给父组件绑定的自定义事件，自定义事件接受一个参数，参数就是子组件传递过来的数据。// 父组件代码，渲染子组件method:{// 子组件代码。
vue 父传子 子传父实现方式
weixin_64735754的博客
03-08 1万+
父传子： 主要步骤： 首先在子组件props中创建一个属性，用以接收父组件传过来的值； 然后父组件中引用子组件，并在子组件标签中添加子组件props中创建的属性； 最后把需要传给子组件的值赋给该属性。 理解： 父亲传给儿子东西，儿子在那边用一个碗接，这个碗就是props，因为传的东西不可能只是一个，所以是一个数组，父亲因为要传东西到儿子的碗里，所以要绑定儿子的碗，然后传值 props：properties的简称 prop 只可以从上一级组件传递到下一级组件（父子组件），...
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 4232
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
Vue父子组件、兄弟组件通信，兄弟组件之间通过父组件调用对方的方法
绝圣弃智-零的博客
05-18 1965
首先需要明确，什么是父子组件以及兄弟组件。 举个例子： 父组件(AsPm.vue) 模板中部分代码（父子组件、兄弟组件相关代码）： <div v-if="dialogVisibleTask"> <el-dialog :title="dialogTitleTask" :visible.sync="dialogVisibleTask"> <...
vue组件之间互相传值：父子传值/父传子 子传父/兄弟组件传值
IAmNotChangAn的博客
01-22 859
vue组件之间互相传值：父子传值/兄弟组件传值
vue组件祖先/父亲/孙子传值：props, provide,inject,$attrs,$listeners,$emit,$on,
热门推荐
qq_41357391的博客
03-12 1万+
vue组件之间的传递分类： 1、父向子传递：props 2、子向父传递：emit3、兄弟之间传递：借助中间代理：emit 3、兄弟之间传递：借助中间代理：emit3、兄弟之间传递：借助中间代理：emit,$on 4、祖先传给孙子：这个高级provide,inject 父子关系：parent =&gt;children 祖先和孙子关系：parent=&gt;grandSon parent.vue ...
快速搭建Vue前端项目：vue-element-admin实践
在本文中，我们将深入探讨如何搭建一个基于Vue和Element-UI的前端项目，以`vue-element-admin`为例，它是一个功能丰富的后台管理前端解决方案。首先，我们需要从GitHub上获取项目源代码，并了解其基本目录结构和关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值