Vue2学习之动态组件、插槽与自定义指令

最新推荐文章于 2024-06-03 13:30:00 发布
最新推荐文章于 2024-06-03 13:30:00 发布
阅读量345 收藏 1
点赞数
文章标签： 前端 javascript es6 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53324833/article/details/121527109
版权
本文介绍了Vue中动态组件的渲染原理，包括如何切换显示与隐藏。讨论了keep-alive的作用，用于保持组件状态，避免切换后数据丢失。讲解了include和exclude属性的使用，以及组件命名和插槽的概念。最后简要提及了自定义指令，它是Vue中扩展功能的一种方式，虽然在日常开发中可能不常用，但对于深入理解Vue框架至关重要。
摘要由CSDN通过智能技术生成

动态组件

动态组件指的是动态切换组件的显示与隐藏。

如何实现动态组件渲染

在这里插入图片描述
先写好实验环境：
在这里插入图片描述
在这里插入图片描述
我们怎么理解这个<component>？它其实就是个占位符，给组件占位用的，我们要展示哪个组件，我们就让这个component去指定要展示的组件名称就可以了。
在这里插入图片描述

使用keep-alive保持状态

在这里插入图片描述
啥叫无法保持组件的状态？
就像下面这样，我们一开始在Left组件中让它加了几个1,：
在这里插入图片描述
然后现在我们切换了Right组件，当我们再切换回来的时候，Left组件不再是之前我们写到的7了：
在这里插入图片描述
这就是组件无法保持状态，加上keep-alive即可：
在这里插入图片描述
keep-alive可以把内部的组件进行缓存，而不是销毁组件。

keep-alive对应的生命周期函数

在这里插入图片描述

keep-alive的include属性

如果不使用这个属性，则默认会把keep-alive包起来的所有组件全部缓存起来。
在这里插入图片描述
同样也还有个exclude，就是选择哪个组件不会被缓存，但是不能同时用。include和exclude只能选一个。

拓展一个组件名称的小知识点

如果我们的组件在向外导出时就指定了自己的名字，那么组件的名称就是name属性的值。
在这里插入图片描述

插槽

什么是插槽

其实这个作为初学者来说，我们很少在实际开发中会用到这个东西。因为这个东西都是那些封装组件的人他们会频繁用到这个东西。所以这个我们会用就行了，所以这里我就只截了图，没有详细分析去怎么使用（毕竟我是后端程序员）。
在这里插入图片描述

基础用法

在这里插入图片描述

没有预留插槽的内容会被丢弃

在这里插入图片描述

后备内容

在这里插入图片描述

具名插槽

在这里插入图片描述

为具名插槽提供内容

在这里插入图片描述

具名插槽的简写形式

在这里插入图片描述

作用域插槽

在这里插入图片描述

使用作用域插槽

在这里插入图片描述

解构插槽Prop

在这里插入图片描述

自定义指令

vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。
这个我感觉应该用的也不多，主攻后端的话就随便了解一下吧，有时间可以再来深究。

自定义指令的分类

在这里插入图片描述

私有自定义指令

在这里插入图片描述

使用自定义指令

在这里插入图片描述

为自定义指令动态绑定传参

在这里插入图片描述

通过binding获取指令的参数值

在这里插入图片描述

update函数

在这里插入图片描述

函数简写

在这里插入图片描述

全局自定义指令

在这里插入图片描述

在地球迷路的怪兽
关注
专栏目录
深入探索 Vue：动态组件、插槽与自定义指令
小刘哥的博客
08-11 72
color: {},data() {return {
【Vue知识点- No6.】动态组件、插槽、自定义指令、tabbar案例
qq_48687155的博客
07-26 556
动态组件，插槽，自定义指令，tabbar案例
Vue2 动态组件
qq_45771053的博客
07-31 765
vue提供了一个内置的组件，专门用来实现动态组件的渲染。动态组件指的就是动态切换组件的显示和隐藏。
Vue2的动态组件
Raccon_的博客
01-27 996
动态组件 实现动态组件渲染 vue提供给一个内置的component组件，专门用来实现动态组件的渲染 //通过 is 属性，动态指定要渲染的组件 <component :is="comName"></component> //点击按钮，动态切换组件的名称 <button @click="comName = 'Left'">展示 Left 组件</button> <button @click="comName = 'Right'"&
Vue2动态组件
骆小洛
12-14 2040
重新创建动态组件的行为通常是非常有用的，但是在有些案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。同样也是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。要求被切换到的组件都有自己的名字，不论是通过组件的。缓存的根组件，也适用于缓存树中的后代组件。强制被切换掉的组件仍然保持“存活”的状态。以上代码中a和b均为两个组件的组件名。
vue2 动态组件
weixin_55932347的博客
05-01 637
什么是动态组件 动态组件指的是动态切换组件的显示与隐藏。 如何实现动态组件渲染 vue 提供了一个内置的 组件，专门用来实现动态组件的渲染 默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组件的状态。 例如： <button @click="coms = 'Left'">渲染 Left组件</button> <button @click="coms = 'Right'">渲染 Right组件</button>
vue2---动态组件
厚积薄发.
07-28 5813
vue2学习之动态组件，星月前端，这篇文章总结了：内部组件component 组件的使用， 内部组件 keep-alive 组件的使用。
Day06_动态组件_插槽_自定义指令_tabbar案例(1).pdf
05-03
在Day06的学习中，我们将深入探讨动态组件、插槽以及自定义指令，并通过一个tabbar案例进行实战练习。 首先，让我们详细了解动态组件。动态组件是通过Vue内置的`<component>`组件和`:is`属性来实现的。`:is`属性...
Vue2基础（4）——ref引用、动态组件、插槽、自定义指令
SongD1114的博客
04-08 6400
Vue2 ref引用、动态组件、插槽、自定义指令
vue组件插槽,自定义指令和$ref的使用
dream_of_forget的博客
09-21 732
我是p标签,我使用了自定义指令v-blue
Vue实现动态组件
最新发布
stella_stella123的博客
06-03 419
Vue实现动态组件
vue2.0动态组件
qq_44039897的博客
03-30 850
1、vue提供了内置的<component>组件，专门用来实现动态组件的渲染 component标签是vue内置的，是组件的占位符 is属性的值表示要渲染组件的名字 is属性的值，应该是组件在components节点下的注册名称 <!--静态的，就是Left组件--> <component is="Left"></component> ​ <!--动态的，在data中写入comName--> <componen
动态组件 & 插槽 & 自定义指令
kaieew12345的博客
08-18 574
1. 什么是动态组件 动态组件指的是动态切换组件的显示与隐藏。 2. 如何实现动态组件渲染 vue 提供了一个内置的 组件，专门用来实现动态组件的渲染。示例代码如下： 3. 使用 keep-alive 保持状态 默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组 件的状态。示例代码如下： 4. keep-alive 对应的生命周期函数 当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。 当组件被激活时，会自动触发组件的 activated
vue2知识点：nextTick语法
刘大猫
05-27 1192
文章目录3.24 nextTick语法 3.24 nextTick语法 说明：类似于定时器的功能 问题：什么场景会使用它呢？ 答案：举例我想有个input输入框，我还有个“编辑”按钮，如图1，如图2，点击“编辑”按钮input输入框就聚焦，失焦就修改成功输入框的值。如图3你想实现45行到50行代码执行完，页面模板就重新解析渲染更新数据，然后你执行52行代码输入框就聚焦了，但实际页面显示压根不聚焦为啥？因为vue会把整个方法都执行完才会去渲染更新DOM节点（为啥要这么设计？因为如果一个方法里面修改8个.
【Vue 2】动态组件和异步组件
Shadow Kylin的博客
08-18 1344
先阅读。
vue中的动态组件
webchang的博客
01-25 7529
vue中的动态组件，代码演示和讲解
【Vue】is特性
jzq950522的博客
03-11 466
1.限制元素 Vue模板就是dom模板，而dom对一些html元素是有限制的，比如 &lt;table&gt; &lt;my-component&gt;&lt;/my-component&gt; &lt;/table&gt; 这样是不行的 通过is我们可以拓展html元素，比如 &lt;ul&gt; &lt;li is="my-component"&gt;&lt;/li&amp
【Vue2】动态组件的使用-切换组件和keep-alive，以及异步组件
weixin_44899940的博客
08-15 1841
动态组件的使用-切换组件和keep-alive，以及异步组件。
Vue2之动态组件、插槽、自定义指令的相关知识
熊凯瑞的博客
04-03 1210
动态组件指的是动态切换组件的显示与隐藏。vue可以使用keep-alive来保持组件切换时的状态，也就是在切换的时候，该组件不会被销毁，而是处于未激活状态，保持原本状态，直到重新激活。当提供了name属性之后，组件的名称，就是name属性的值。（1）组件的“注册名称”的主要应用场景是：以标签的形式，把注册好的组件，渲染和使用到页面结构中。（2）组件声明时候的“name”名称的主要应用场景：结合标签实现组件的缓存功能；以及在调试工具中看到组件的name名称。
动态组件与自定义指令：Vue TabBar案例实现
在Day06的学习中，主要关注了动态组件、插槽和自定义指令的应用，以及一个具体的TabBar案例开发。首先，我们回顾了组件的创建、注册和使用，强调了动态组件的概念，即在一个挂载点上动态地切换不同的组件。在实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

在地球迷路的怪兽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值