【Vue知识点】——Vue组件间通信的常用方式

最新推荐文章于 2022-09-27 17:14:27 发布
最新推荐文章于 2022-09-27 17:14:27 发布
阅读量252 收藏
点赞数
分类专栏： 前端 前端——Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50785976/article/details/125888611
版权

文章目录

通过Props属性通信

   props属性的作用：主要用于组件间的通信，主要为父组件给子组件通信。props的工作是为了接收外面传来的数据。一般在子组件中，我们将需要传递的数据放入props属性中，在父组件中将数据传递过来即可。
   props接收数据大致可以分为三种：
我们可以定义一个学生子组件，包含学生姓名，学生年龄，将这两个属性放在props中；再在父组件中传递数据，展现在子组件中
   1.简单接收方法
   student组件中包含学生姓名、学生年龄、发送年龄方法的props属性，同时在按钮上定义一个方法去触发props中传递过来的方法
student组件
   在student的父组件中注册student组件，并使用该组件传入props属性值，同时对getName方法去定义一个获取学生名字的方法
父组件
   该props属性的使用，只是简单的将页面数据进行传递，并没有过多的要求

   2.接收同时对数据类型限制方式
   如果说我们需要对接收的props数据的类型进行限制处理，可以采用以下方式，将props作为对象使用

最低0.47元/天 解锁文章
Array[林]
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中post请求接口时，以数组的形式传参处理方法
weixin_41346436的博客
08-22 1万+
摘要：一般很多情况下，vue中请求接口的时候，data传参是都是字符串的形式，很少有以数组的形式，但是今天就遇到了，后端写接口的人也是真的傻X啊。 描述下需求：公司业务需要，需要做一个交货单核验的功能，意思就是利用条形码扫描仪扫描交货单上面的条形码，将扫描的结果通过事件提交给后台，然后后端判断结果 如图所示是所需要的设备，虽然这与本章博客主要内容无关，哈哈 部分截图 后端给的说明文档： 代码片段 <template> <div class="form-content"&
element-ui表格数据批量删除，调后台接口，以数组形式传输id值
qq_49934059的博客
08-18 621
delHandle(){ this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'error', center: true }).then(() => { this.idStr=this.idStr.split(',') delRolesByIds(this.idS
【前端_层次选择器】子代选择器、后代选择器、兄弟选择器、相邻选择器
十二_的博客
09-27 342
学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?/* 子选择器 *//* 后代选择器 */
vue props传Array类型值,子组件报错解决
weixin_44845483的博客
06-10 1481
添加链接描述
vue相关知识点——浅浅笔记
06-22
Vue 相关知识点浅浅笔记 一、 Vue 概述 Vue.js 是一个渐进式 JavaScript 前端框架，用于构建用户界面。它具有声明式、响应式的数据绑定和组件化的开发特点。 Vue 基于 MVVM 模式，使用数据驱动的方式，将数据和 ...
Vue购物车——组件化.rar
05-01
总结，"Vue购物车——组件化"案例展示了Vue如何利用组件化思想构建一个购物车功能，涵盖了组件注册、父子组件间通信和数据单向绑定的关键知识点，这些是理解和掌握Vue.js框架的基础。通过学习和实践这个案例，开发者...
ppt课件-第5章 Vue组件.zip
03-22
**组件通信**：Vue提供了多种组件间通信的方式。例如，通过props向下传递数据，使用自定义事件（$emit）向上触发，或者使用Vuex状态管理库进行复杂应用的状态管理。 **组件的生命周期**：Vue组件有多个生命周期钩子...
vue.js 简单的组件和点击事件应用
03-21
创建一个Vue组件的基本步骤包括定义模板、数据和方法。例如，我们可以创建一个名为`HelloWorld`的简单组件： ```html <h1>{{ message }} export default { data() { return { message: '你好，世界!' ...
Vue学习组件
08-10
在“Vue学习组件”中，我们将深入探讨Vue的组件系统、vue-router的使用，以及其他重要的Vue知识点。 首先，让我们从Vue的组件系统开始。组件是Vue的核心特性，它们是可复用的独立单元，可以视为小型的应用。每个...
vue props传Array/Object类型值，子组件报错解决办法（已解决）
热门推荐
line
09-17 3万+
问题： Props with type Object/Array must use a factory function to return the default value. 1、在vue中如果当在父组件通过props传Array/Object类型值给子组件的时候 2、如果子组件的props接收default为 ，如下 报错 原因：props default 数组／对象的默认值...
vue中组件之间传递数组
m0_37343874的博客
05-14 3689
* let InFo = JSON.stringify(arr) localStorage.setItem('array',InFo); 通过 JSON.stringify 将数组解析成字符串 let Info = JSON.parse(localStorage.getItem('array')); 通过**JSON.parse**将字符串还原成数组
【极客日常】vue3中实现Array数组更新的方法
HiKariのTechLab
06-17 9171
本文解决下纠结vue3如何实现array类型的数据更新这个问题
vue父子组件传递数组
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
02-14 2万+
父组件 通过v-bind绑定数据 子组件 通过props接收数据
子组件通过$emit来向父组件传递数据（array）
爬虫 的博客
12-14 3051
最近遇到一个子组件传递多数据给父组件，最开始是当做字符串传多值，但没有成功，然后在网上找到这种方法，现在再这里记录下，给大家和自己参考下 子组件 "button" v-on:click="submit">确定 //js export default { props:["titleName","id","order"], methods: {
Vue中$emit的用法
weixin_38098192的博客
06-04 5008
1.父组件可以使用props把数据传给子组件；2.子组件可以使用$emit触发父组件的自定义事件；vm.$emit(event,arg);//触发当前实例上的事件；vm.$on(event,fn);//监听event事件后运行fn；...
聊一聊Vue中的回调函数
weixin_34250709的博客
06-10 1万+
回调函数 ? 那不是UI框架才用的吗？有句话怎么讲来着，书到用时方恨少。平常我们撸Vue，感觉即使用props封装组件。。也很少自己制作回调这种看起来高大上的东西.......但是实际开发中封装组件并不是这样的。许多组件需要子父组件进行通信让我们举个栗子：产品经理有个需求，需要让你做一个优惠券列表。然后需要把优惠券列表封装成组件。在下单支付时，调用优惠券列表。然后选择其中一个，在父组件里获取选择的...
vue.js中关于$emit(eventName, optionalPayload) 触发事件的应用，子组件向父组件传递数据（字符串，数组，或者对象等）
qq_34129336的博客
03-14 2800
一、父组件及代码解释：&lt;template&gt; &lt;div&gt; &lt;p v-for="msg in messages"&gt;{{msg}}&lt;/p&gt; &lt;!--输出子组件传给父组件的数据--&gt; &lt;my-button4 @onclick="increment"&gt;&lt
vue教程(vue2笔记+vue3笔记)
最新发布
04-22
- Props（属性）：组件间的通信方式，用于父子组件数据传递，props数据在组件实例上而非`.data`对象，可通过`this.$props`访问。 - Scope（作用域）和组件间通信：通过`scope`标签和自定义事件传递数据，推荐使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值