组件传值/组件通信

已于 2022-03-07 00:21:29 修改
阅读量138 收藏
点赞数
文章标签： vue.js
于 2022-03-06 18:28:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuyuan123456/article/details/123314593
版权

我们先来看下步骤

先看父向子传值

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

 需要先在子组件里面，声明变量来接收父组件传过来的值

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

 然后在父组件里面通过属性，将具体的值写进去

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

小结一下

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

组件传值配合循环使用

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

 

总结一下

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

我们再来拓展一个小知识点，单向数据流。就是说，子组件不能改变父组件传过来的值。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

咱们再来看一下子向父传值

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

 看一下方法里面放的代码逻辑

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

小结一下

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

看一下简约版的案例图！

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

 

跨组件通信

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

 

看下实际代码

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

 

 

 

 

 

 

 

 

 

 

JSONP＄
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
组件之间的通讯传值
m0_62351434的博客
02-10 340
一.父组件传到子组件 父组件是通过props属性给子组件通信的 数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告） 1. 父组件parent.vue代码如下： 父传子 在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型} <template> <div class="paren
Vue组件通信中非父子组件传值知识点总结
10-15
总结来说，理解非父子组件传值的关键在于掌握事件总线的使用。通过创建一个独立的Vue实例作为事件总线，组件可以触发和监听自定义事件，以此达到数据的传递。这种方法简单易用，但不适用于大型应用，因为随着组件...
Vue组件间相互传值，组件通信，
nilmao的博客
03-26 1040
1.父组件 传值给 子组件 1.1.props 父组件通过属性的方式向子组件传值，子组件通过 props 来接收。 // 父组件 <user-detail :name="name" /> <!--通过属性 :myName="name" 传值--> export default { components: { UserDetail } ...... } 在子组件中使用props（可以是数组...
避免循环引用
fellow_gengxj的博客
12-29 646
防止循环引用
Vue 之 组件之间的传值通信（多种方法，简洁而不失重点）
ZhuangWei的博客
04-19 1193
Vue 之 组件之间的传值通信 子组件使用父组件的数据、方法； 父组件使用子组件的数据、方法；
前端面试——Vue篇（组件传值/通信方式）
xiaoxiaoovo的博客
07-19 152
前端面试——Vue篇（关于组件传值/通信方式）
react18【系列实用教程】组件 （2024最新版 | 含父子组件传值、兄弟组件传值、越层组件传值、“插槽“）
朝阳39的博客
05-14 834
你好;也可以写成箭头函数return 你好
vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
你还有我
04-13 1655
组件结构 组件结构： Vue.component('自定义组件名', { template:'自定义模板', data(){ return { key:value, ... } } }) 组件中的相关属性： 组件类似于vue实例对象，vue实例对象拥有的属性，比如data, methods, computed, filter ，
react 多级组件传值/父子、子孙、爷孙组件等（React.context)
偏执
07-18 835
上面的例子也可以看到，才用了连个context，Consumer的嵌套已经不浅了，所以我们使用context的时候尽量遵循一个单一数据源的原则，否则很容易造成嵌套地狱(wrapper hell)但我们平时开发过程中，经常碰到组件树层级很深，如果不同层级的组件需要使用同一份数据，那从顶层组件分别传递props的方案肯定是很麻烦的。因此context的使用场景就是：在组件树中，不同层级需要访问相同的数据源时，可以利用context，进行组件之间的通信。
Vue组件（二）父组件、子组件通信/传值
天马3798
09-29 1396
方案：1.调用子组件方法传值 2.使用props双向绑定传值。2.父组件使用，重点parentNum 可以实现双向绑定。通过ref引用属性访问子组件对象。
vue组件通信传值操作示例
10-17
本篇将详细讲解 Vue 组件间通信的两种常见方式：父子组件通信和兄弟组件通信。 **1. 父子组件通信** 在 Vue 中，父子组件通信主要通过以下几种方式： - **Props 向下传递数据**：父组件可以通过 `props` 将数据...
vue 组件间的通信之子组件向父组件传值的方式
11-20
首先，我们要理解 Vue 中的组件通信基本规则。父组件通常通过属性（props）向下传递数据给子组件，而子组件向父组件传递数据则通常通过事件（events）。这是 Vue 推荐的单向数据流策略，确保数据流动的方向清晰，...
vue 子组件向父组件传值方法
08-27
在Vue.js框架中，通信是组件之间协作的关键。在组件化的开发模式下，有时我们需要将子组件的数据传递给父组件，以便在更高层级进行处理或显示。本文将详细讲解Vue子组件如何向父组件传递值。 一、使用自定义事件（$...
vue2.0 子组件改变props值,并向父组件传值的方法
08-27
那么，父组件是使用 props 传递数据给子组件，但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了。 在父组件中定义两个变量，动态绑定到子组件中： 子组件： ``` <!-- 子组件模板 --> ...
vue3【详解】单文件组件 SFC（含SFC的优点、缺点、使用场景、原理、使用预处理器、＜script setup＞语法详解、资源拆分）
最新发布
朝阳39的博客
07-16 435
自定义指令必须遵循命名规范（自定义指令名的首字母必须是v，后续跟首字母大写的自定义指令名称 ）// 在元素上做些操作 } } < template > < h1 v-my-directive > This is a Heading const。
vue解决页面放大图片模糊的问题
m0_56104994的博客
07-12 294
解决页面放大，图片模糊的问题
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
qq_37752382的博客
07-15 451
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
vue+vite项目中跨域问题解决与跨域代理的两种方式原理详解
whs15193553607的博客
07-12 1281
（1） target参数：相当于是在代理地址（geoserver或者geoserverApi）前面拼接target代理后地址就是http://localhost:8080/geoserver或（2）changeOrigin参数：开启代理在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题；（3）rewrite参数：路径改写。
微信小程序组件传值和组件通信
07-28
如果你对Vue的父子组件通信和事件触发也感兴趣，可以查看一篇关于Vue的相关文章。\[3\] #### 引用[.reference_title] - *1* *2* *3* [微信小程序之父子组件传值通信与事件触发（最全实用总结）]...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值