Vue 关于深度嵌套的兄弟组件互调内部方法

最新推荐文章于 2023-06-14 10:04:53 发布
最新推荐文章于 2023-06-14 10:04:53 发布
阅读量995 收藏
点赞数
分类专栏： Vue使用心得
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44601948/article/details/105850828
版权

Vue 关于深度嵌套的兄弟组件互调内部方法

问题：

组件01的onSlectALL方法要调用组件02的内部定义的方法，组件之间相差了10几个组件深度

思路：

1.是这样的我先在状态管理器（Vuex）中的state定义一个属性和在mutations定义一个改变它的方法
2. 再在state内定义getters属性
3. 然后我在组件01的onSlectALL函数内改变全局状态管理器的状态
4. 我在组件02内引入辅助函数和那个gettes值，在computed引入辅助函数，然后在watch内监听computed内的属性变化来判断调用哪个函数

解决：
是这样的我先在状态管理器（Vuex）中的state定义一个属性和在mutations定义一个改变它的方法

下图在store.js内
在这里插入图片描述

再在state内定义getters属性

下图在getters内
在这里插入图片描述

然后我在组件01的onSlectALL函数内改变全局状态管理器的状态

下图在组件01内
在这里插入图片描述

我在组件02内引入辅助函数和那个gettes值，在computed引入辅助函数（这部分在文档可以看到这么用），然后在watch内监听computed内的属性变化来判断调用哪个函数

下面两图都在组件002内：
在这里插入图片描述
在这里插入图片描述

澜漾
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 兄弟组件的信息传递的方法实例详解
10-16
在标题和描述中提到的"vue 兄弟组件的信息传递的方法实例详解"主要涉及到Vue中三种不同的数据传递方式：Vuex状态管理、Vue实例模块（Event Bus）以及事件链。下面我们将详细探讨这三种方法。 1. Vuex 传递数据 ...
Vue 兄弟组件通信的方法（不使用Vuex）
08-29
Vue 兄弟组件通信的方法（不使用Vuex） 本文主要介绍了Vue 兄弟组件通信的方法，主要思想是使用自定义事件实现父子组件之间的通信。下面详细介绍该方法。 首先，在子组件中，我们可以使用 `$emit` 方法触发一个...
vue中子组件调用兄弟组件方法
08-27
主要介绍了vue中子组件调用兄弟组件方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue 多层组件嵌套二种实现方式(测试实例)
08-29
本篇文章主要介绍了Vue组件嵌套二种实现方式(测试实例)，具有一定的参考价值，代码很简单，感兴趣的小伙伴们可以参考一下
vue 子组件控制父组件的 三种方法
Leon_940002463的博客
12-05 3941
第一种方法 直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child> </div> </template> <script> import child from './components/dam/chil...
vue中的组件嵌套
qq_42683507的博客
06-17 1212
关于嵌套组件，我们用一个案例来演示 ①定义模板，父模板first，还有两个子模板，并且写内部占位符 <!-- 定义模板 --> <template id="first"> <div> <ul> <li @click="tempA='secondA'">这个是first的A</li> <li @click="tempA='secondB'">这个是first的B</li> &l
Vue-组件的嵌套
见证自己学习,成长的记录
05-30 2815
在vue开发中，组件的嵌套也是会被经常使用到的，所以也应该掌握。
vue多级嵌套组件传参
qq_21681391的博客
08-03 1131
$attrs $attrs概念： 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。 参考文档 $listeners $listeners概念：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$li
【精讲】vue组件开发基础、多层嵌套（内含详细注释）、vuecomponent构造函数
m0_59505309的博客
08-02 940
【精讲】vue组件开发基础、多层嵌套（内含详细注释）、vuecomponent构造函数
vue 多级嵌套示范
05-03
NULL 博文链接：https://lanyan-lan.iteye.com/blog/2428319
vue中组件嵌套问题
qq_41742576的博客
06-14 306
模块系统发现它需要 A，但是首先 A 依赖 B，但是 B 又依赖 A，但是 A 又依赖 B，如此往复。这变成了一个循环，不知道如何不经过其中一个组件而完全解析出另一个组件。官方给的解决方法就是异步加载组件。将上面的 import 加载的方式全部变成异步加载，代码如下。
vue.js入门（18）组件嵌套
yiyiyixin的博客
05-20 779
养成一个习惯，components下的组件，首字母都大写，组件名是什么，class名，name名就是什么这个时候写好User.vue文件&lt;template&gt; &lt;div class="user"&gt; &lt;ul&gt; &lt;li v-for:"user in user"&gt;{{ user }}&lt;/li&gt; &lt;/u
Vue组件循环嵌套引用报错
weixin_44743903的博客
05-30 675
chart.vue文件 <template> <div> <migrate-mix-chart></migrate-mix-chart> </div> </template> import MigrateMixChart from '~/components/common/migrateMixChart.vue' migrateMixChart.vue <template> <
vue:多重嵌套的子组件调用父组件方法
FlowingRiver
01-06 1843
vue中子组件调用父组件一般用emit方式,如下: 父组件: methods:{ fathermethod(param){ console.log(param) } } 子组件: this.$emit("fathermethod",param) 对于多层嵌套的父子组件,用emit会无效. 可使用provide/inject方式: 父组件: data () { return { } }, methods: { XXXX(param){ } },
Vue框架——兄弟组件之间数据交互
cmy_top的博客
02-24 370
兄弟组件之间数据交互兄弟组件之间数据交互需求需求实现 兄弟组件之间数据交互需求 需求：创建两个组件，分别是 kk-text 和 bb-text ，两个组件里都有一个属性 num， 在两个组件的字符串模板里都定义一个按钮，每当点击其中一个组件的按钮时，另一个组件的num值将会改变 重点：通过事件中心进行间接的数据交互 实现事件中心： ① 创建事件中心 var hub = new Vue(); ② 监听事件和销毁事件 // 监听 hub.$on('事件名称', 事件函数); // 销毁 hub.$of
解决vue数据层级太深,数据改变后页面数据不更新的问题
qq_50787965的博客
07-06 4708
在app.vue中添加reload事件 <div id="app"> <router-view v-if="msg"></router-view> </div> </template> <script> import API from "./config/API"; export default { name: "app", provide() { return { reload: this
【Vue2】兄弟组件传参方法总结
weixin_44431073的博客
05-29 8798
一、前言 之前汇总过父子组件传参的三种方法，感兴趣的可以看我之前的文章：【vue2】子组件向父组件传参方法汇总_能能爱编程的博客-CSDN博客 现在来总结下兄弟间组件传参的方法。分别是【事件总线】和【消息的订阅与发布】两种方式。 二、事件总线 1、介绍 在main.js中定义一个原型属性作为中间值，然后在兄弟组件之间互相触发和接收即可完成数据的通信。收数据的组件绑定自定义事件，发送数据的组件触发自定义事件 2、案例 定义一个学校组件、一个学生组件。学生点击按钮，发送学生人数给学校组件。 3、
vue组件间（父子、兄弟、跨级组件）通信传值
DOM曼珠沙华的博客
05-21 5331
大体可以分为这几种情况： 父子组件传值 子父组件传值 兄弟组件传值（不相干的两个组件） 跨组件传值 父组件给子组件传值 静态传值 父组件内： <form-test title="element表单"></form-test> 子组件使用props获取： props:['title'], 子组件渲染在页面内： <h3>{{title}}</h3> 最后渲染效果： 动态传值 子组件内的东西与上方的一致，修改父组件内的组件： <form-test
vue子组件嵌套父组件
最新发布
04-09
在Vue中，子组件可以嵌套在父组件中，实现组件的复用和组合。子组件可以通过props属性接收来自父组件的数据，并且可以通过事件向父组件发送消息。 以下是Vue子组件嵌套父组件的介绍： 1. 定义子组件：首先需要定义...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值