Vuejs
动态组件可以帮助我们动态切换组件,例如在网页的多标签介面中常见到动态切换组件的需求,便是动态组件能帮忙的场景之一。
动态组件需要配合 <component>
内置组件以及 :is
这个特殊属性,下方实作一个简单的范例:
首先建立要切换的子组件 my-component-one
、my-component-two
Vue.component('my-component-one', {
data() {
return {
data: ''
}
},
template: `<p>my-component-one</p>`
})
Vue.component('my-component-two', {
data() {
return {
data: ''
}
},
template: `<p>my-component-two</p>`
})
在父组件中,透过 <component>
组件配合 :is
,便可以动态的切换组件。
const vm = new Vue({
el: '#app',
data: {
currentComponent: 'my-component-one'
},
template: `<div id="app">
<button @click="changeComponent('my-component-one')">my-component-one</button>
<button @click="changeComponent('my-component-two')">my-component-two</button>
<div>
<component :is="currentComponent"/>
</div>
</div>`,
methods: {
changeComponent(value) {
this.currentComponent = value
}
},
})
可以观察到透过动态组件,子组件实体在切换时会被销毁,并且重新渲染当下的动态子组件。
透过动态组件,子组件
在切换时 instance 会被销毁以及重新渲染。
透过在子组件生命周期钩子加入 console
可以看见销毁以及重新渲染的过程。请在子组件中加入下列代码:
created() {
console.log('my-component-two 被渲染了')
},
destroyed() {
console.log('my-component-one 被销毁了')
},
可以看到在切换时子组件被销毁,当下的动态子组件被渲染、销毁的过程:
不过,动态组件在切换後由於子组件实体被销毁,所以子组件本身的状态也会被清除,这个时候可以透过 <keep-alive>
内置组件保存该子组件 instance。
接着来看看 <keep-alive>
吧!
<keep-alive>
使用 <keep-alive>
这一个内置组件去包裹动态组件,可以缓存不活动的动态组件组件实体,这个时候组件的状态便可以在切换的过程中保留。
今天假如子组件为下方 input
内容,在没有使用 <keep-alive>
时使用,状态无法保留:
我们可以看到切换後 input
内文字消失了。这个时候便可以使用 <keep-alive>
解决该问题。
在使用 <keep-alive>
後,子组件状态会由於 <keep-alive>
缓存了组件实体而被保留下来。
deactivated
、activated
生命周期钩子前面说到使用 <keep-alive>
後,实体将被保留,所以切换动态组件时,并不会触发子组件的 创建
及 删除
,取而代之的在动态组件使用 <keep-alive>
後,切换组件时有了两个特有的生命周期钩子 deactivated
、activated
分别在切换动态组件时调用:
deactivated
:在 <keep-alive>
缓存的组件被停用(自该组件切换到别的组件)时调用activated
:在 <keep-alive>
缓存的组件被激活(切换到该组件)时调用透过在子组件加上下列程序码可以观察上述生命周期:
created() {
console.log('my-component-one 被创建了')
},
destroyed() {
console.log('my-component-one 被销毁了')
},
deactivated() {
console.log('my-component-two 被停用了')
},
activated() {
console.log('my-component-two 被激活了')
},
可以观察到切换动态组件时组件并不会被创建、删除,而是被激活或是停用。
以上介绍了有关动态组件的使用以及如何保存动代组件的状态,重点是如何去透过 <keep-alive>
保留组件状态,并且可以在使用 <keep-alive>
时使用特有的生命周期钩子。
以上为此次内容,感谢看到这里的你,我们明天见。
若是文中有任何错误、错字、想讨论的内容,欢迎各位大大不吝鞭笞指正、交流分享,笔者不慎感激 ✦ ✦ ✦
▶︎ 笔者 github:https://github.com/YUN-RU-TSENG
▶︎ 老王卖瓜之笔者另一篇铁人:每天来点 CSS Specification
▶︎ 倘若不断向深处扎根,似乎就能茁壮成长 - RM
<<: 没有登入也可以看得到内容? Mendix上的Anonymous User
>>: [3D地图-CesiumJS系列] 三、车辆废气排放地图 - 以粒子系统(Particle system)实作
类似PHP的while回圈,计算其後的布林条件如果是值为true则执行大括号下面的语法,会重复条件的...
Q: 是时候表演真正的技术了? A: 要动起来是少不了animation属性的! 本篇开始将使用a...
上一篇有提到关於如何在向量中求梯度下降的公式, 因此此篇要来讲为什麽要向量v跟f(x,y)的偏微分作...
安装 tensorflow-gpu (如果自己电脑没有 GPU 就装 CPU 版) pip inst...
敏捷是一种心态,秉承《敏捷软件开发和实践宣言》中所述的四个价值观和十二个原则。敏捷是一个笼统的术语。...