巧用provide和inject方法完成精巧的Tab组件

最新推荐文章于 2024-09-10 23:27:03 发布
最新推荐文章于 2024-09-10 23:27:03 发布
阅读量248 收藏
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49210479/article/details/108502504
版权
本文介绍了如何使用Vue的provide和inject方法创建一个精巧的Tab组件，详细阐述了组件间的通信流程，包括事件总线(EventBus)的使用、事件触发与监听的原理，并探讨了Props与Data在传值中的不同角色。同时，通过两步实现Tab标签的切换功能：第一步是从外部获取值并更新样式，第二步是通过内部点击事件进行状态更新。
摘要由CSDN通过智能技术生成

巧用provide和inject方法完成精巧的Tab组件

目标：

希望用户如下使用代码：

<m-tabs>
        <m-tabs-nav>
            <m-tabs-item name="tab1"></m-tabs-item>
            <m-tabs-item name="tab2"></m-tabs-item>
        </m-tabs-nav>
        <m-tabs-content>
            <m-tabs-pane name="tab1"></m-tabs-pane>
            <m-tabs-pane name="tab2"></m-tabs-pane>
        </m-tabs-content>
</m-tabs>

接下来我们就来创建5个组件

 

思路分析：

爷爷组件tabs 有数据 selectedTag, 然后会向head和Body传值，然后，head会向自己的三个孩子传值，body会向自己的三个孩子传值

这里我们可以用到provide和inject

provide

最低0.47元/天 解锁文章
sunwan19941023
关注
专栏目录
Vue3【插槽 Slots、组件生命周期、生命周期应用 、动态组件、组件保持存活、异步组件、依赖注入、Vue 应用】(五)-全面详解（学习总结---从入门到深化）
03-26 349
Vue3【插槽 Slots、组件生命周期、生命周期应用 、动态组件、组件保持存活、异步组件、依赖注入、Vue 应用】(五)-全面详解（学习总结---从入门到深化）
vue 父子组件传值的方法
weixin_39888214的博客
05-13 224
一、父传子 1、Prop 向子组件传递数据 //子组件 Vue.component('Child', { props: ['title'], template: '<h3>{{ title }}</h3>' }) //父组件调用 <Child title="My journey with Vue"></Child> 2、$emit监听子组件事件 //子组件 <button v-on:click="$emit('enlarge-t.
vue利用provide和inject做套娃组件设计
baijiafan的博客
01-20 2106
provide和inject用在子父级组件设计中的妙用。
vue自定义tabs表单切换使用@vueuse/core的useVModel和vue的provide、inject以及JSX语法
jjw_zyfx的博客
03-28 594
vue自定义tabs表单切换使用@vueuse/core的useVModel和vue的provide、inject以及JSX语法
组件通信——provide 和 inject 实现爷孙组件通信
最新发布
a123456234的博客
09-10 1111
provide和inject是 Vue.js 提供的一种在组件之间共享数据的机制，它允许在组件树中的任何地方注入依赖项。这对于跨越多个层级的组件间通信特别有用，因此无需手动将prop数据逐层传递下去。provide在一个组件中使用provide方法来定义要提供的数据或方法。provide方法返回一个对象，该对象包含了要提供的数据或方法。inject在另一个组件中使用inject方法来注入这些数据或方法。inject方法接收一个数组或对象，指明要注入的数据或方法名称。provide和inject。
Vue3封装知识点（三）依赖注入：provide和inject详细介绍
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
09-19 2万+
在vue3中project和inject详细使用介绍，使用技巧和原理，简单易懂！
inject（注入）
Liingot的博客
07-07 1万+
Hello大家周末好，今天给大家讲一下inject（注入） 在每个 new Vue 实例的子组件中，其根实例可以通过 root属性进行访问，root 属性进行访问，root属性进行访问，root直接找的是根父亲，调用方法和root直接找的是根父亲，调用方法和root直接找的是根父亲，调用方法和refs的方式很像，this.refs的方式很像，this.refs的方式很像，this.root.xxx...
@Inject 注解
Rational001的专栏
08-08 896
@Inject 是 JSR-330 规范中定义的注解，使用时需要额外导入 javax.inject 依赖。以下三种类成员，可用。 1. 构造方法 注入的参数数量是0个或多个。 因为JRE无法决定构造方法注入的优先级，所以规范中规定类中只能有一个构造方法带@Inject注解。 2.方法 运行时可注入的参数数量为0个或多个。但使用参数注入的方法不能声明为抽象方法也不能声明其自身的类型参数。 ...
Vue 依赖注入(provide/inject)
weixin_44205155的博客
10-09 375
provide/inject 是解决组件之间的通信问题的利器，不受层级结构的限制。 小白，修改一个官网的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue2.6.js">...
vue(三)—组件与组件的拆分
Sunday97的博客
05-26 5134
组件分为全局组件和局部组件，每个vue的组件都是vue实例，每个vue实例也都是组件， 组件定义后就可以多次的拿来当模板用 每个组件里面都有一个模板属性template,data属性，methods属性，以及传参的属性props等，而最大的组件即Vue实例没有将template属性写出来时它默认的是template的值是它所绑定的挂载点下的所有内容 1、全局组件 用法如下： <div ...
inject
a675697174的博客
06-03 638
介绍 inject 方法定义在 module Enumerable 中，它让你可以通过集合中的元素 来通过某种计算得到一个值 [1,3,5,7].inject(0){|s,i| s +i} #=> 16 [1,3,5,7].inject(0){|s,i| s *i} #=>105 inject工作方式（用上面的例子来讲解）： 当关联的block第一次被调用的时候：s被赋予参数的值, i 被
浅谈vue的provide和inject使用方法及其原理
yezi__6的博客
10-27 1064
首先来谈谈我们为什么要使用provide/inject呢？对于爷爷和孙子组件之间，甚至太爷爷组件与孙子组件通信我们用vuex不就ok了。 那事实的确如此，但是，请听我说但是，有时候你项目比较小甚至组件通信的场景很少的，那么你引入vuex就为了那么几个通信传参是不是很浪费啊。有人也可能会想到使用$parent获取父组件实例，来获取data/methods，这种两层就还好，那多层呢，组件嵌套很深的话，你怎么弄？写个函数把$parent再封装一下。那不是很麻烦吗，现成的你不用非要曲线救国。哈哈～扯远了。 不废话那
nodejs 注入 inject
ISaiSai的专栏
07-24 3623
当有些对象需要根据条件不同注入的时候，可以简单使用注入 如下例：根据配置不同创建不同的USER对象，注入到 tool.do 方法中,从而实现不同的效果index.js 主函数var tool = require("./tool.js"); // 此处是配置,根据配置决定 注入的是什么 var config = "Man"; if (config === "Man") { var USER
groovy 的inject()方法使用简例
Hankle_Xu的博客
01-11 1708
inject()方法有强大的累计功能，以闭包作为参数处理一个数据结构并返回一个值。inject()方法的第一个参数是第二个参数（闭包）的立即返回值，无需引入额外的变量就能实现累积计算，例如统计图书馆所有丛书库存，每套丛书有不同套数，每套丛书有不同册数和库存数量，业务模型如下 public class Library { private List bookSeriesList; //
@Inject 注解初识
热门推荐
不易青年
11-12 8万+
注解以前学习Java的时候也学过，是在学习Spring的时候，但是@Inject 注解还真是头一次见乘着休息时间赶紧学习一下。正好手里有有本书《Java程序员修炼之道》，书中对@Inject 注解讲解的比较清楚，所以来和大家分享一下。 @Inject 注解可以出现在三种类成员之前，表示该成员需要注入依赖项。按运行时的处理顺序这三种成员类型是： （1）构造方法 （2）方法 （3）属性 在构...
jQuery模拟prototype的inject方法
重要的不是思想，而是思想的深度
08-30 217
    首先来看看prototype.js里的inject方法    手册中的描述:       inject(accumulator, iterator) -&gt; accumulatedValue  基于迭代子所产生的前一个结果递增地构建一个结果值。可以用来构建数组、数字数额／平均值等等。     用法:  [1, 2, 3].inject([], function(array, v...
@Inject
shuangyidehudie的专栏
04-24 5473
你可以用 @Inject 注解告诉container：”我需要一个bean，请您帮我创建一个放在这里，谢谢！“。 在实例化这个类时，container就会把你需要的bean创建（或者找出来）给你放好。@Inject可以在三个地方出现。 1.Bean的构造方法之前，container将会提供构造方法中的参数。 Java代码   public class Checkou
初识@Inject 注解(简单明了)
付石头的博客
05-22 2万+
注解以前学习Java的时候也学过，是在学习Spring的时候，但是@Inject 注解还真是头一次见乘着休息时间赶紧学习一下。正好手里有有本书《Java程序员修炼之道》，书中对@Inject 注解讲解的比较清楚，所以来和大家分享一下。 @Inject 注解可以出现...
vue3provide/inject触发另一个组件方法
06-09
要触发另一个组件的方法，您可以使用provide/inject来共享方法并从父组件向子组件传递它。具体步骤如下： 1. 在父组件中，创建一个provide对象，其中包含要共享的方法： ``` provide() { return { showMessage: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值