vue组件传参，参数处理

最新推荐文章于 2023-12-18 18:48:06 发布
最新推荐文章于 2023-12-18 18:48:06 发布
阅读量625 收藏
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39945506/article/details/115621818
版权

父加载子组件有两种方式，对于传递值也有对应的处理方法
1、通过v-if控制子组件的加载，参数处理
在这里插入图片描述
如上图所示，其中参数showConfNoticeBox是控制组件显隐，noticeMap为父给子的参数，closeNotice为关闭组件调用父类方法。这篇文章主要讲的是noticeMap的参数处理。
需要在子组件的created钩子函数中处理，如下图
在这里插入图片描述
应为用v-if加载组件是组件未打开时，组件未被加载，数据需要在create中处理

2.通过在子组件中使用v-if父组件传值加载，参数处理
父组件引入子组件
父组件引入子组件，和1不同的是这里将v-if写在了子组件中，下图为子组件图
子组件

和1中对于noticeMap参数的处理是不同的，因父组件被加载后，子组件也已经被加载。故需要在watch钩子函数中处理，如下图
在这里插入图片描述

weixin_39945506
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件与组件间传值
qq_42312396的博客
03-11 923
vue的组件往往是多层级的，要实现组件与组件间的数据传递也有很多方法，下面代码中student与school组件为姐妹组件，有着共同父组件app。 父组件向子组件传递消息用props 父app中的模板，普通传值 <school name='AppName' number='女' ></school> 子school中接收 data(){ return{ address: "北京", msg:'hello' }},
vue-url获取参数后统一处理
林子懿0509
11-29 1031
在url中获取参数后，我们在多个地方需要使用到，那么我们就可以通过缓存来使用 在vue项目的入口中进行获取 App.vue的mounted方法中进行处理 mounted() {     let str = this.GetQueryString('applicationId', '0');     localStorage.setItem("applicationId", str...
Vue事件处理@传参
m0_71088505的博客
06-29 208
4.methods中配置的函数，都是被Vuesuo管理的函数，this指向的是vm 或 组件实例对象；@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；3.methods中配置的函数，不要用箭头函数！2.事件的回调需要配置在methods对象中，最终会在vm上；正确写法：将shouInfo()函数写在vm中的methods方法中。错误写法：将showInfo()函数直接写在vm外面。传参与不传参用法：(用于删除获取id可用)绑定事件，其中xxx是事件名；
vue实现路由传参-复杂数据类型传参--query
weixin_51127384的博客
09-15 869
query--点击传递参数 父页面传递子页面--- userCoustomer(item){ this.$router.push({ path:"/customerdetai", query:{customerCode:item.customerCode} }); }, 子页面通过@route.query接收 弊端：传递的参数会显示在url路径上 ...
Vue的组件传参
qq_51701698的博客
09-14 508
父子传参、子父传参、兄弟传参、事件总线/事件车(EventBus)、Vuex。
vue路由传参页面刷新参数丢失问题解决方案
10-16
在Vue.js应用中，路由传参是一种常见的功能，用于在不同组件之间传递数据。然而，当页面被刷新时，通过`params`或`route`属性配置传递的参数可能会丢失，这是一个常见的问题。本文将详细讲解这个问题以及如何解决。 ...
vue路由传参 vue路由传参
11-18
在构建SPA的过程中，我们经常需要在不同的路由之间传递参数，以便于组件之间共享数据。Vue Router 提供了两种主要的参数传递方式：query 和 params。下面将详细介绍这两种方法，以及它们的特点和使用场景。 ### 1. ...
VUE 父子组件传递
02-23
HTML编码中，利用了Vue框架，在该框架下父子组件直接经常需要进行数据传递
vue路由传参三种基本方式详解
10-15
在Vue Router中，有三种基本的途径来传递参数给目标组件，分别是通过`params`、`query`以及直接在路径中硬编码。下面我们将详细探讨这三种方式及其应用场景。 ### 方案一：通过`params`传递参数 `params`是一种在...
vue之间的传值
weixin_49519788的博客
07-04 227
vue之间的传值 一、父组件向子组件传值 1、父组件发送的形式是以属性的像是绑定值到子组件身上； 2、然后子组件用属性props接收； 3、在props中使用驼峰形式，模板中需要使用横线的像是字符串形式的模板中没有这个限制； 二、子组件向父组件传值 1、子组件用emit()触发事件；2、emit()触发事件； 2、emit()触发事件；2、emit()第一次参数为自定义的事件名名称 第二个参数为需要传递的数据 3、父组件用v-on监听组组件的事件 三、兄弟之间的传递 1、兄弟之间传递数据需要借助于事件
vue中的模板语法、条件渲染（v-if）、列表渲染（v-for）
最新发布
l12345666777的博客
12-18 1629
因为组件是可复用得实例，如果组件data是一个对象，会暴露在全局，数据全局可见，任意一个组件修改该组件数据，其他使用到该组件得组件数据也会被修改，所以data是一个函数不是一个对象，数据仅组件内可见。
vue 中常使用的数据处理方法
JackChan
04-18 1037
vue 中常使用的数据处理方法
Vue 路由传参及接收参数
热门推荐
Bule_daze的博客
01-03 1万+
???? 方法一：params 传参 this.$router.push({ name:"admin", 　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { 　　//组件路径 path: '/admin', 　　//组件别名 n...
Vue之条件渲染
浩泽学编程的博客
07-10 1476
v-ifv-elsev-else-ifv-show写法：（表达式返回的是布尔值）（1）v-if=“表达式”（2）v-else=“表达式”（一般不带表达式，v-else是当v-if或v-else-if都不成立就会触发）（3）v-else-if=“表达式”适用于切换频率低的场景特点：不展示的DOM元素直接移除注意：v-if可以和v-else、v-else-if一起使用，但要求结构不能被“打断”写法：v-show=“表达式”（表达式返回的是布尔值）
Vue传值
ha_ha_en的博客
07-05 381
传值 通过路由带参数进行传值。 通过设置Session Storage 缓存的形式进行传值。 // A组件缓存user const user = { 'name': 'Lucy', 'age': 18} sessionStorage.setItem('缓存名称', JSON.stringify(user)) // B组件获取缓存 const userB = JSON.parse(sessionStorage.getItem('缓存名称')) 父组件传值给子组件 如果参数很多，可以使用json 数组
VUE 俩种方式引入子组件方式携带参数打开子页面
liuchenhaoy的博客
10-12 1995
VUE 两种方式引入子组件方式 携带参数打开/载入子页面
vue组件传参
fagdg的博客
07-27 4740
1、定义与使用2、父传子使用props，父传给子的数据是只读的(做默认值，读取显示)不能修改3、子传父使用的事件$emit$emit(事件名,事件值)发送一次事件，事件名{counterchange}和事件值{counter}是自定义的$event固定写法，事件的值{counterchange事件的值，也是子组件$emit的第二个参数}...
vue vue-router传参，v-for与v-if结合遍历显示该参数对应的内容
ColourfulTiger的博客
06-09 6998
问题描述：接着上一篇的router-view来讲，本次主要解决的是获取地址栏的http://localhost:8081/#/HelloWorld/engine/2中的参数id的值：2，怎样通过2来使用v-for遍历数组中对应的id为2的那一栏数据，注：仅显示id为2的这一项内容。即通过参数传递过来的值决定最终要显示的数组中的那一项内容。环境：webpack v-cli1、基本配置操作（1）rou...
vue面试题十一：关于Vue.$set()、Vue中data选项中的值做为参数传递、Vue.nextTick()、v-if与v-show的总结
Dormiveglia-flx的博客
12-18 1213
关于Vue.$set 、Vue中data选项中的值做为参数传递、Vue.$nextTick、v-if与v-show问题的思考一 Vue.$nextTick() 的背景及用法二 Vue.$set的背景及用法 一 Vue.$nextTick() 的背景及用法 JS 运行机制(事件循环) JS执行是单线程的，它是基于事件循环的。 1.所有同步任务都在主线程上执行，形成一个执行栈。 2.主线程之外，会存在一个任务队列，只要异步任务有了结果，就在任务队列中放置一个事件。 3.当执行栈中的所有同步任务执行完后，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值