专栏首页做工程师不做码农Vue.js动态组件解析

Vue.js动态组件解析

什么是动态组件绑定?简单的说,就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。

is属性

在挂载点使用component标签,然后使用v-bind:is="组件名",会自动去找匹配的组件名,如果没有,则不显示;改变挂载的组件,只需要修改is指令的值即可。 HTML:

1234567891011121314

<div id="example"> <input type="radio" id="one" value="fast" v-model="currentView" /> <label for="one">fast</label> <br /> <input type="radio" id="two" value="bus" v-model="currentView" /> <label for="two">bus</label> <br /> <input type="radio" id="three" value="business" v-model="currentView" /> <label for="three">business</label> <component :is="currentView"> <!-- 组件在 vm.currentView 变化时改变 --> </component></div>

JS:

123456789101112

//创建根实例new Vue({ el: "#example", data: { currentView: 'bus' }, components: { fast: {template: '<div>滴滴快车</div>'}, bus: {template: '<div>滴滴巴士</div>'}, business: {template: '<div>滴滴专车</div>'} }});

通过is属性绑定的vm.currentView变量值,控制展示的组件,在线查看效果

keep-alive

简单来说,被切换掉(非当前显示)的组件,是直接被移除了。如果把切换出去的组件保留在内存中,则可以保留它的状态或避免重新渲染。为此,可以添加一个keep-alive指令参数。

1234

<keep-alive> <!-- 非活动组件将被缓存 --> <component :is="currentView"></component></keep-alive>

Vue.js为其组件设计了一个keep-alive特性,如果这个特性存在,那么在组件被重复创建时,会通过缓存机制快速创建组件,以提升视图更新性能。

activate钩子

简单来说,他是延迟加载。 例如,在发起ajax请求时,会需要等待一些时间,假如我们需要在ajax请求完成后,再进行加载,那么就需要用到activate钩子了。

具体用法来说,activate是和template、data等属性平级的一个属性,形式是一个函数,函数里默认有一个参数,而这个参数是一个函数,执行这个函数时,才会切换组件。

123456789

Vue.component('activate-example', { activate(done) { let _this = this; loadDataAsync(function(data) { _this.someData = data; done(); }); }});

activate钩子只作用于动态组件切换或静态组件初始化渲染的过程中,不作用于使用实例方法手工插入的过程中。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序组件开发之时间轴组件及组件关系

    先简单介绍一下公司业务和前端项目情况吧。公司是做金融行业财富管理的业务,涉及主要是做基金、保险这一块。前端项目目前涉及B端后台管理系统、C端小程序、Node服务...

    Dunizb
  • Spring IOC(依赖注入、控制反转)概念理解

    用了Spring之后, Spring容器会负责把被依赖的B组件注入到A组件中,A只要被动地等待即可。

    Dunizb
  • 【译】改善React应用性能的5个建议

    考虑下面这个简单的 React 应用程序,您是否认为当 props.propA 更改值时 <ComponentB> 会重新渲染?

    Dunizb
  • 面向设计的半封装web组件开发

    作者:张鑫旭,资深钓鱼爱好者,然后平时喜欢研究与学习前端技术。 前言 本文内容可谓是对大脑认知的一场洗礼。我们平常提到组件,就会想到重用,各个项目都能使用。而...

    腾讯大讲堂
  • 面向设计的半封装web组件开发

    本文内容可谓是对大脑认知的一场洗礼。我们平常提到组件,就会想到重用,各个项目都能使用。而本文的组件,对于某具体项目而言是组件,但是,对于其他项目,就是个半封装的...

    疯狂的技术宅
  • 面向设计的半封装web组件开发 - 腾讯ISUX

    腾讯ISUX
  • 从零开始学 Web 之 Vue.js(六)Vue的组件

    在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

    Daotin
  • Angular中,父组件向子组件传递 “模版内容引用”

    今天看到文章:https://segmentfault.com/a/1190000015944548 。专门研究一下ngTemplateOutlet用法!!!!

    申君健
  • react-native flatlist 上拉加载onEndReached方法频繁触发的问题

    mcq
  • Vue中组件之间8中通信方式,值得收藏

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的...

    用户6973020

扫码关注云+社区

领取腾讯云代金券