多个父组件共用一个子组件，但是子组件点击的时候在不同父组件中触发的事件不同

最新推荐文章于 2022-10-21 11:56:54 发布
最新推荐文章于 2022-10-21 11:56:54 发布
阅读量686 收藏
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59930878/article/details/119672996
版权

两个父组件中引入子组件的时候分别传一个值用来区分是哪个父组件(一个主页面一个历史记录页面调用子组件的时候传一个值比如pagesign),子组件中接收这个值，然后进行判断这个值执行不同的操作，方法想出来的时候感觉好简单啊，当时想了一大堆方法用路由啊等，记录一下

前端小菜机
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序中多个相同的组件点击时当前样式的改变
Syleapn的博客
03-12 1万+
第一次用CSDN写博客，以前的是新浪博客，地址为：http://blog.sina.com.cn/99yt99 以后一直就用CSDN，新浪上面就不更新了。1、需要的东西  一张透明背景的图片：proper.png     2、效果展示  默认选中与样式改变的为“距离优先”，当然自己可以在ceshi.js中改变自己想默认的那个。通过点击切换改变样式）3、源码：wxml代码<view class...
父子组件间通信，父组件触发子组件中的事件，子组件触发父组件中的事件
qq_45530512的博客
11-30 1140
父子组件间通信，父组件触发子组件中的事件，子组件触发父组件中的事件
Vue中父子组件里方法的相互调用
qq_33718889的博客
06-18 2691
一. Vue中在父调子 <template> <div class="parent"> <child ref="children">子组件</child> </div> </template> <script> export default { name: "parent", data...
Vue多个父组件引用同一个子组件，子组件的$parent指向问题
m0_73095627的博客
10-16 1879
Vue多个父组件引用同一个子组件，子组件的$parent指向问题
多个父组件绑定同一个子组件，其中一个父组件需要改变子组件传过来的值而另一个父组件的值则不动。
m0_64707449的博客
08-23 413
1.首先找到两个父组件的点击事件，各传入一个参数。2.子组件这边用props定义变量接收。3.在父组件引入的子组件标签中绑定要传到子组件的值。（当然你要是有其他想法的话，可以在绑定的点击事件方法里操作）4.在子组件需要操作的标签中用v-if写条件判断语句。另外父组件传过来的值可以在子组件的生命周期函数中打印一下看看对不对（如：created,mounted等）（这是一个父传子，简单提供一种思路）成长的道路注定坎坷，就算跌跌撞撞，也要不慌不忙，努力向上。生活是公平的，它对每一个都是公平的。
Vue 父组件调用子组件，子组件调用父组件，动态切换组件找不到子组件的解决办法
wafangdianwangning的博客
07-14 2266
前端最近加班加跑了，我一个java开发就担起了前端开发的重任，用的还是我从来没用过的vue 于是看了看文档跟angular有点相似的其实，但是在组件切换的地方花了不少时间研究 一。想把一个页面分成好多个组件拼起来，实现局部刷新的那种效果， 这是父页面，点击父组件中的搜索栏组件，搜索栏组件调用父组件的列表组件，搜索和列表是兄弟组件 这里我用子调父再调子的方式 把父组件的这个方法当作...
关于Vue多个父组件引用同一个子组件，子组件的$parent指向问题
ouzexi的博客
12-19 2306
两个不同的父组件parentA、parentB引用同一个子组件child 例子: child.vue <template> <div> <h2>我是子组件</h2> </div> </template> <script> export default { created() { console.log(this.$parent); } } </script>
ElementUI多个子组件表单的校验管理实现
10-16
在父组件 App.vue 中，我们可以监听子组件的事件来触发校验并收集结果。例如，可以为每个子组件添加一个自定义的 `validate` 事件，当点击【提交】按钮时，依次调用这些事件并检查返回的校验状态。如果所有子组件的...
vue之封装多个组件调用同一接口的案例
10-14
在Vue开发过程中，为了提升代码的可维护性和复用性，常常需要对多个组件共用的接口进行封装。本文将详细介绍如何在Vue中封装多个组件调用同一接口的方法，并探讨不同封装策略的优缺点。 首先，我们可以看到一个基础...
解决vue多个路由共用一个页面的问题
08-27
在 Vue 开发中，遇到多个路由需要共用一个页面的需求是非常普遍的，特别是当路由是通过动态添加的，不同的路由展示的东西只是数据不同其他没有变化。这篇文章将与您分享解决 Vue 多个路由共用一个页面的问题，具有很...
汽车电子中的Linear汽车应用的微功率精准三路电源监视器保证在高温下工作
11-30
6. **可靠的复位输出**：当被监视的三个电压中的任意一个低于其设定门限时，共用的开漏复位输出将保持低电平，直到所有三个电源在200ms内恢复到正常范围。这种延迟设计增强了系统复位的稳定性。 7. **价格竞争力**...
viewpager中嵌套多个activity
06-18
在Android开发中，ViewPager是一种非常常用的组件，它用于展示可滑动的页面，通常用于实现类似Tab的效果。在“viewpager中嵌套多个activity”的场景下，开发者可能会遇到一些挑战，比如如何有效地管理多个Activity...
Vue2.0教程（六）vue组件（父子组件、样式冲突问题）
qq_43682422的博客
04-12 3148
vue组件 1.什么是组件化开发 组件化开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。 2.vue中的组件化开发 vue是一个支持组件化开发的前端框架。 vue中规定：组件的后缀名是.vue。之前解除到的App.vue文件本质上就是一个Vue的组件。 3.vue组件的三个组成部分 每个.vue组件都由3部分构成，分别是： template -->>组件的模板结构 script -->>组件的javascript行为 style --&
RecyclerView父组件和子组件点击冲突问题解决
qq_31433709的博客
11-12 1473
嘛嘛...遇到的问题是这样的,我仿照微信的长按点击显示放大文本效果对TextView(定制)设置了长按点击事件,然后在RecyclerView中使用了这个组件,然后对RecyclerView的每一个item设置了点击事件,然后就出现了点击冲突的问题.这种问题真的不太想网上搜索解决方法,因为很多人水平比我还差= =,所以想着自己解决= =,实现的思路也是很简单,但是要考虑到以后出现同样的问题该怎么办...
vue中设置子组件的点击事件不影响父组件的点击事件
穆雄雄的博客
10-23 4193
“大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂。”今天分享个技术块儿。在做项目的过程中，遇到了个问题，简单的描述一下：有一个card卡片，上面绑定了个点击事件，点击card卡片，就会...
多个页面需要用到同一个组件，向子组件传数据
qq_46617584的博客
09-02 422
多个页面需要用到同一个组件，向子组件传数据
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3950
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
组件封装 - 分页组件
hmxs_hmbb的博客
10-21 1742
分页组件封装
项目部年度员工培训计划.docx
最新发布
07-13
项目部年度员工培训计划.docx
如何实现vue父组件中的多个子组件共用和处理同1 个变量
05-19
可以在父组件中声明一个数据属性，然后在多个子组件中通过 `props` 来访问和修改这个属性。当这个属性的值发生变化时，所有使用它的子组件都会自动更新。 例如，在父组件中声明一个名为 `sharedData` 的属性： ```javascript <template> <div> <child-component-1 :shared-data="sharedData"></child-component-1> <child-component-2 :shared-data="sharedData"></child-component-2> </div> </template> <script> export default { data() { return { sharedData: 'initial value' } } } </script> ``` 然后在两个子组件中分别接收这个属性，并在需要时修改它： ```javascript <template> <div> <p>Child Component 1:</p> <p>{{ sharedData }}</p> <button @click="updateSharedData">Update Shared Data</button> </div> </template> <script> export default { props: { sharedData: String }, methods: { updateSharedData() { this.$emit('update:sharedData', 'new value') } } } </script> ``` ```javascript <template> <div> <p>Child Component 2:</p> <p>{{ sharedData }}</p> <button @click="updateSharedData">Update Shared Data</button> </div> </template> <script> export default { props: { sharedData: String }, methods: { updateSharedData() { this.$emit('update:sharedData', 'new value') } } } </script> ``` 在子组件中，通过 `$emit` 方法触发一个名为 `update:sharedData` 的事件，来修改父组件中的 `sharedData` 属性。注意事件名称中的冒号表示绑定了一个 `v-bind` 指令，将子组件中的属性同步到父组件中。 最后，在父组件中监听这个事件，并更新 `sharedData` 属性的值： ```javascript <template> <div> <child-component-1 :shared-data="sharedData" @update:sharedData="sharedData = $event"></child-component-1> <child-component-2 :shared-data="sharedData" @update:sharedData="sharedData = $event"></child-component-2> </div> </template> <script> export default { data() { return { sharedData: 'initial value' } } } </script> ``` 这样，父组件中的 `sharedData` 属性就能被多个子组件共用，并且所有对它的修改都会同步到其他组件中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值