按钮控制组件名传参

最新推荐文章于 2022-07-24 16:05:28 发布
最新推荐文章于 2022-07-24 16:05:28 发布
阅读量94 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47733490/article/details/118994585
版权

同一个按钮要展示出两种不同的组件效果，在按钮的点击事件里通过判断组件名称来进行展示

在组件传参的过程中，props总是接收不到这个参数，原因是按钮事件下面要再写一个组件用来把参数抛出去

 

 

 

刘大气
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js父与子组件之间传参示例
10-20
1. **父组件向子组件传参（Props）** 在Vue.js中，父组件向子组件传递参数通常通过`props`属性实现。例如，在`App.vue`中，我们可以创建一个名为`componentA`的子组件，并在模板中使用`<component-a>`标签，将`...
React组件内事件传参实现tab切换的示例代码
01-19
本文介绍了React组件内事件传参实现tab切换的示例代码，分享给大家，具体如下： 组件内默认onClick事件触发函数actionClick, 是不带参数的, 不带参数的写法: 如onClick= { actionItem } 带参数的写法, onClick = ...
多个按钮组传参
m0_56118578的博客
12-21 221
内容概况 **功能需求：**是有四组按钮组，分别对应后端的一个查询条件，通过点击按钮来达到传参的目的，而且点击同一组的另一个按钮会替换所对应的条件 **样式需求：**已经传入的参数所对应的按钮，或者说已点击的按钮要有与其他同组按钮不同的背景底色 如图（请忽略丑陋的配色） 一、前端代码 本人太懒，一些字段名就不做遮蔽隐藏了，大家自己忽略吧 <div class="row one"> <!-- 第一组按钮 -->
实现按钮点击调用方法传参数的方式传值给模态框
kawaidudu的博客
05-27 3052
实现的效果：可能描述的话，不一定能描述的清楚，就直接上图，根据图片来描述 上面是总页面图，下面全是点击不同的编辑按钮的模态框 就如上几张图的效果这样的页面，点击编辑按钮弹出模态框显示相应的数据（当然模态框的html代码只有一个，按钮也只通过相同的class来实现这一效果），那么怎么实现这一效果呢，接下来就来讲讲 准备（首先说说这里主要需要用到的技术）： 前端：jquery 后端：基本所有的语句都能打印获取数据，主要讲js的部分，这里我使用的是php 正文部分： 首先在数据库中查询数据并在页面打印数据
vue中子组件一次性向父组件传递多个参数
grr1640610995的博客
07-07 391
子组件： 父组件：
点击按钮传递参数
weixin_45870877的博客
07-24 893
点击按钮传递参数
button html 传数据,html – 如何通过提交按钮传递参数？
weixin_32018297的博客
06-04 2329
您必须在请求中传递参数.由于您有表单并提交表单,所以您可以使用称为“submitType”的形式隐藏字段,并在使用javascript单击按钮时填充该表单.那么这将在下一个请求中可用.表单内的某处：< input type =“hidden”name =“submitType”>在提交按钮中：< input name =“JSP-2”type =“submit”onclick =...
bootstrap confirmation按钮提示组件使用详解
01-19
bootstrap-confirmation按钮提示组件，它类似于js里面confirm的功能,界面更加美观。 介绍这个组件之前，可以先来看看bootstrap里面提示框的效果： 1、源码地址 ...2、效果展示 3、代码示例 ...link href=css/bootstrap...
Angular父子组件通过服务传参的示例方法
12-12
今天在使用ngx-translate做多语言的时候遇到了一个问题，需要在登录页面点击按钮，然后调用父组件中的一个方法。 一开始想到了@input和@output，然而由于并不是单纯的父子组件关系，而是包含路由的父子组件关系，...
微信小程序通过按钮传参数
小绵杨
06-22 2512
需求：需要通过删除按钮实现删除云数据库中对应的内容，要删除云数据库中的内容，是以数据的“_id”为依据的。所以我要在js中删除数据，必须获得要删除数据的"_id"。 <button type="primary" size="mini" bindtap="delete" data-id="{{user._id}}">删帖</button> 微信小程序中“ data-*=" " ”可以实现按钮传值。其中‘ * ’号自定义名称，我这里取名为id，然后赋值为user._id。 js中通过按
html中利用表单的button按钮传递参数
xdscode的博客
08-04 1万+
如下，一个表单有两个按钮，搜索2 按钮带有参数 搜 索 搜 索2
html中的button按钮调用js函数和提交表单传递参数
热门推荐
wanderlustLee的博客
02-26 4万+
1.button的type设置为button 而不用submit，并添加onclick方法调用js函数 &lt;input type="button" name="confirmAlter" value="确认修改" onclick="changeInfo(form1.code,form1.name,form1.detail,form1.count)"/&gt; 2.传到js函数中，然后提交表...
Javascript中button按钮的onclick()事件传递参数
php菜鸟技术天地
06-17 4万+
function aaa(){  var u_id = '你的id值';  location.href = modifyUser.php？user=u_id } 方法二
点击按钮传值
atfxcjk336801的博客
12-15 279
　　　　　　　　　　　　　　　效果图????： 当点击第几个按钮就在粉色框内显示第几个盒子 1.首先搭一个框架，写HTML和css里面的布局，把界面搭好-----???? 注：border-radius: 5px,5px,5px,5px;这个为切圆角，四个角切5个像素 ...
html中button通过自定义属性传值
qq_42402381的博客
05-20 8670
<body> <button class="btn" onclick="chickMe(this)" data-name="张三" id="1" data-age="18">点击</button> <button class="btn2" onclick="chickMe(this)" data-name="李四" id="2" data...
父组件触发子组件并传参
最新发布
09-05
在父组件中可以通过在子组件标签上添加ref属性来引入子组件。例如，可以这样引入子组件： <com1 ref="child" @parentNotic="parentNotic" :parenParamsTest="parenParams"></com1> 然后在父组件的data中声明子组件： components:{ 'com1':{ template:'<div> {{parenParamsTest}}----{{name}} <br> <button @click="parentNotic">点击父组件会执行一个方法</button> </div>', props:['parenParamsTest'], data () { return { name: '子组件名称', val: '父组件调用专用参数' } }, methods: { parentNotic() { this.$emit("parentNotic", {'name': this.name,'val': this.val}) } } } } 在父组件中，可以使用this.$refs.child.name来获取子组件的name属性，使用this.$refs.child.val来获取父组件的val属性。 这样，当父组件点击按钮触发parentNotic方法时，会向子组件发送一个名为parentNotic的事件，并传递一个包含子组件的name和父组件的val的对象作为参数。子组件可以通过监听这个事件来获取父组件传递的参数。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue父组件调用子组件属性，父组件往子组件传递参数，子组件传参并触发父组件方法](https://blog.csdn.net/weixin_38860401/article/details/118001148)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值