This article mainly introduces the vue dynamic component component. Vue provides a built-in <component>, which is specially used to realize the rendering of dynamic components. This tag is equivalent to a placeholder. You need to use the is attribute to specify the bound component. If you want to know more details, please refer to the specific content of the following article
- component
How to implement dynamic component rendering
Vue provides a built-in <component> , which is specially used to realize the rendering of dynamic components.
This tag is equivalent to a placeholder, you need to use the is attribute to specify the bound component
<button @click="comName = 'Left'">展示Left</button>
<button @click="comName = 'Right'">展示Right</button>
<div class="box">
<!-- 渲染Left组件和Right组件 -->
<!-- component组件是Vue内置的 -->
<!-- is表示要渲染的组件的名字 -->
<component :is="comName"></component>
</div>
<script>
import Left from '@/compeonents/Left.vue'
import Right from '@/components/Right.vue'
export default {
components: {
Left,
Right
},
data() {
return {
//comName 表示要展示的组件的名字
comName: Left,
}
}
}
</script>
- keep-alive
- existing problems
When the function of adding one button is implemented in the Left component, switch the component after adding one operation, and then switch back
The following is the plus one function in Left
<div class="left-container">
<h3>Left 组件 ---- {
{ count }}</h3>
<button @click="count += 1">+1</button>
</div>
<script>
export default {
data(){
return {
count: 0
}
}
}
</script>Operation, after adding one operation, switch to the right component, then switch back, and find that the data in the component has been rewritten and initialized
Use Vue 's life cycle to view the Left component
The following is the life cycle function added in Left
export default {
created() {
console.log('Left 组件被创建了！')
}，
destoryed(){
console.log('Left 组件被销毁了~')
}
}
Existing problem: the component will be destroyed and created while switching the component, so that the component object obtained every time you switch to the same component is not the same, and the initialization data will be rewritten
- Use keep-alive to solve
The keep-alive component is also a built-in component of Vue and can be used directly
In the App root component, modify as follows:
<keep-alive>
<!-- keep-alive 可以把内部的组件进行缓存，而不是销毁组件 -->
<component :is="comName"></component>
</keep-alive>
- The life cycle of keep-alive
该生命周期，只有在组件使用了keep-alive时才能使用
deactivated当组件被缓存时，自动触发
actived当组件被激活时，自动触发
在Left组件中添加如下修改
//当组件第一次被创建时，会先触发created,后触发activated
//当组件被激活时，只会触发activated，不触发created
activated() {
console.log('组件被激活了，activated')
},
deactivated(){
console.log('组件被缓存了，deactivated')
}
- keep-alive 的 include, exclude属性
keep-alive默认会缓存所有被keep-alive包裹的component里的组件
如何指定需要缓存的组件呢：
使用include / exclude 属性,不能同时使用
<keep-alive include="Left,MyRight">
<component :is="comName"></component>
</keep-alive>以上指定了需要缓存的组件名称： 注意这里的组件的名称
Left组件中：
export default{}Right组件中：
export default{
//当提供了name属性后，组件的名称就是name属性的值
name: 'MyRight'
}区分： 组件内name属性，和组件外注册名 的关系
组件外：
import Left '@/components/Left.vue'
components: {
Left,
}这里的注册名只用于组件的引用，如果组件内没有name属性那么name默认就是注册名
export default{
//当提供了name属性后，组件的名称就是name属性的值
name: 'MyRight'
}