vue2.0动态组件

最新推荐文章于 2024-06-11 09:00:00 发布
最新推荐文章于 2024-06-11 09:00:00 发布
阅读量826 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44039897/article/details/123857040
版权
本文介绍了Vue2.0中动态组件的使用，包括通过标签配合is属性来渲染不同组件，以及如何利用keep-alive进行组件状态的保持。详细讲解了keep-alive的activated和deactivated生命周期函数，以及include和exclude属性的用法。同时，区分了组件的注册名称和声明名称在实际应用中的不同场景。
摘要由CSDN通过智能技术生成

1、vue提供了内置的<component>组件，专门用来实现动态组件的渲染

  • component标签是vue内置的，是组件的占位符

  • is属性的值表示要渲染组件的名字

  • is属性的值，应该是组件在components节点下的注册名称

<!--静态的，就是Left组件-->
<component is="Left"></component>
​
<!--动态的，在data中写入comName-->
<component :is="comName"></component>

2、使用keep-alive保持状态

（1）keep-alive使内部的组件进行缓存

<keep-alive>
    <component :is="comName"></component>
</keep-alive>

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

  • 当组件被缓存时，会自动触发组件的deactivated生命周期函数

  • 当组件被激活时，会自动触发组件的activated生命周期函数

  • 当组件第一次被创建时，既会执行created生命周期，也会执行activated生命周期

（3）include属性

多个缓存用“,”分隔，让里面的可以缓存

<keep-alive include="Left">
    <component :is&
最低0.47元/天 解锁文章
✪ω✪玖忆惜梦✪ω✪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2 动态组件
qq_45771053的博客
07-31 745
vue提供了一个内置的组件，专门用来实现动态组件的渲染。动态组件指的就是动态切换组件的显示和隐藏。
基于vue2.0动态组件及render详解
08-27
基于vue2.0动态组件及render详解 基于Vue 2.0动态组件及render详解的知识点总览 1.1 Vue 2.0动态组件介绍 在Vue 2.0中，动态组件是一个非常重要的概念。动态组件可以根据不同的条件渲染不同的组件，从而实现更加...
动态组件、缓存组件、异步组件-vue2
qq_47455650的博客
09-12 848
2、 组件缓存起来：通过异步加载的组件会缓存起来，当你下一次再用到这个组件时，丝毫不会有任何的疑迟，组件很快会从缓存中加载出来。
VUE 2.0 基础入门（五）动态组件 & 插槽 & 自定义指令
ElysiumAILab
05-13 449
VUE 2.0 基础入门（五）动态组件 & 插槽 & 自定义指令前言动态组件1 什么是动态组件2 如何实现动态组件渲染3 使用 keep-alive 保持状态4 keep-alive 对应的生命周期函数5 keep-alive 的 include 属性插槽1 什么是插槽2 体验插槽的基础用法2.1 没有预留插槽的内容会被丢弃 前言 课程内容来自视频链接 希望大家多多支持作者 本文记录用，防止遗忘 动态组件 1 什么是动态组件 动态组件指的是动态切换组件的显示与隐藏。 2 如何实现动态组件渲染
Vue2实现动态组件
最新发布
qq_54548545的博客
06-11 306
Vue2实现动态组件
vue2.0动态添加组件
weixin_34401479的博客
12-14 443
方法一、&lt;template&gt; &lt;input type="text" v-model='componentName'&gt; &lt;button @click='add'&gt;click me to add a component&lt;/button&gt; &lt;/template&gt; &lt;script&gt; // 引入要添加的所有
Vue实现动态组件
stella_stella123的博客
06-03 374
Vue实现动态组件
Vue2动态组件
骆小洛
12-14 1885
重新创建动态组件的行为通常是非常有用的，但是在有些案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。同样也是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。要求被切换到的组件都有自己的名字，不论是通过组件的。缓存的根组件，也适用于缓存树中的后代组件。强制被切换掉的组件仍然保持“存活”的状态。以上代码中a和b均为两个组件的组件名。
Vue 2.0 动态组件
嘿丷如歌的博客
10-30 330
demo01 Document var vm=new Vue({ el:'#box', data:{ a:'test_a' }, components:{ 'test_a':{ template:'素胚勾勒出青花笔锋浓转淡'
vue2.0全局组件之pdf详解
08-30
Vue2.0 全局组件之 PDF 详解 在 Vue2.0 中，使用全局组件来实现 PDF 文件的预览是一种常见的需求。以下是关于 Vue2.0 全局组件之 PDF 详解的知识点总结： 1. 使用 pdf.js 库 在该组件中，我们使用了 Mozilla 开发...
vue2.0 父组件给子组件传递数据的方法
08-28
在父组件 App.vue 中引用子组件 A.vue，把 name 的值传给 A 组件。这篇文章主要介绍了vue2.0 父组件给子组件传递数据的方法,需要的朋友可以参考下
vue2.0 自定义组件的方法（vue组件的封装）
08-27
Vue 2.0 自定义组件的方法（Vue 组件的封装） 在 Vue 2.0 中，自定义组件是非常强大的功能之一，它允许开发者根据自己的需求封装自己的组件，从而提高开发效率和代码重用性。在本文中，我们将详细介绍 Vue 2.0 ...
vue2---动态组件
qq_61950936的博客
07-28 5615
vue2学习之动态组件，星月前端，这篇文章总结了：内部组件component 组件的使用， 内部组件 keep-alive 组件的使用。
Vue2的动态组件
Raccon_的博客
01-27 956
动态组件 实现动态组件渲染 vue提供给一个内置的component组件，专门用来实现动态组件的渲染 //通过 is 属性，动态指定要渲染的组件 <component :is="comName"></component> //点击按钮，动态切换组件的名称 <button @click="comName = 'Left'">展示 Left 组件</button> <button @click="comName = 'Right'"&
vue2知识点：nextTick语法
刘大猫
05-27 1170
文章目录3.24 nextTick语法 3.24 nextTick语法 说明：类似于定时器的功能 问题：什么场景会使用它呢？ 答案：举例我想有个input输入框，我还有个“编辑”按钮，如图1，如图2，点击“编辑”按钮input输入框就聚焦，失焦就修改成功输入框的值。如图3你想实现45行到50行代码执行完，页面模板就重新解析渲染更新数据，然后你执行52行代码输入框就聚焦了，但实际页面显示压根不聚焦为啥？因为vue会把整个方法都执行完才会去渲染更新DOM节点（为啥要这么设计？因为如果一个方法里面修改8个.
vue2.0-动态组件、插槽、自定义指令
qq_52822043的博客
04-12 857
1.动态组件 动态组件指的是动态切换组件的显示与隐藏。 1）实现动态组件渲染 vue提供了一个内置的<component>组件，专门用来实现组件的渲染。 <template> <div class="app-container"> <h1>App 根组件</h1> <hr /> <button @click="comName = 'Left'">展示Left组件</bu...
vue2 动态组件
weixin_55932347的博客
05-01 623
什么是动态组件 动态组件指的是动态切换组件的显示与隐藏。 如何实现动态组件渲染 vue 提供了一个内置的 组件，专门用来实现动态组件的渲染 默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组件的状态。 例如： <button @click="coms = 'Left'">渲染 Left组件</button> <button @click="coms = 'Right'">渲染 Right组件</button>
vue2.0 动态切换组件
weixin_30596023的博客
09-08 79
组件标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../vue2....
vue2 动态添加全局组件
波客
02-26 272
将index.js引入到main.js 即可 // eslint-disable-file import Vue from 'vue' const path = require('path') const filName = require.context('../public', true, /\.vue$/) filName.keys().forEach(item => { const name = path.basename(item, '.vue') Vue.componen..
vue2.0父子组件传递函数
09-01
在Vue2.0中，父子组件之间可以通过props属性和$emit方法进行函数的传递。 首先，在父组件中，通过props属性将函数传递给子组件。在父组件中定义一个函数，然后将它添加到子组件的props中。例如： ```js // 父组件 <template> <div> <child-component :childFunction="parentFunction"></child-component> </div> </template> <script> export default { methods: { parentFunction() { // 在父组件中定义的函数 } } } </script> ``` 然后，在子组件中，通过this.$emit方法将其作为事件，从而调用父组件中的函数。在子组件中通过$emit方法触发一个事件，并将需要传递的参数传递给父组件中的函数。例如： ```js // 子组件 <template> <div> <button @click="childFunction">点击按钮</button> </div> </template> <script> export default { props: { childFunction: { type: Function, required: true } }, methods: { childFunction() { this.$emit('child-function'); } } } </script> ``` 最后，在父组件中，监听子组件的事件，并调用相应的处理函数。在父组件中通过v-on指令监听子组件触发的事件，并在相应的处理函数中调用父组件本身的函数。例如： ```js // 父组件 <template> <div> <child-component :childFunction="parentFunction" @child-function="handleChildFunction"></child-component> </div> </template> <script> export default { methods: { parentFunction() { // 在父组件中定义的函数 }, handleChildFunction() { // 处理子组件触发的事件 } } } </script> ``` 通过上述的方式，就可以在Vue2.0中实现父子组件之间的函数传递。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值