客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
1、component如何实现动态组件渲染
这个标签就相当于一个占位符，需要使用is属性指定绑定的组件
<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>
2、keep-alive2.1存在的问题当在 如下是
<div class="left-container">
<h3>Left 组件 ---- {{ count }}</h3>
<button @click="count += 1">+1</button>
</div>
<script>
export default {
data(){
return {
count: 0
}
}
}
</script>
操作，进行加一操作后切换到 使用 如下是
export default {
created() {
console.log('Left 组件被创建了！')
}，
destoryed(){
console.log('Left 组件被销毁了~')
}
}
再次执行上诉操作后，得到的结果如下： 存在的问题： 在切换组件的同时会销毁和创建组件，这样每次切换到同一组件时得到的组件对象就不是同一个了，会重写初始化数据 2.2使用keep-alive解决
在App根组件中如下修改： <keep-alive> <!-- keep-alive 可以把内部的组件进行缓存，而不是销毁组件 --> <component :is="comName"></component> </keep-alive> 2.3keep-alive的生命周期该生命周期，只有在组件使用了
在
//当组件第一次被创建时，会先触发created,后触发activated
//当组件被激活时，只会触发activated，不触发created
activated() {
console.log('组件被激活了，activated')
},
deactivated(){
console.log('组件被缓存了，deactivated')
}
2.4keep-alive 的 include, exclude属性
如何指定需要缓存的组件呢： 使用 <keep-alive include="Left,MyRight"> <component :is="comName"></component> </keep-alive>
Left组件中：
export default{}
Right组件中：
export default{
//当提供了name属性后，组件的名称就是name属性的值
name: 'MyRight'
}
组件外：
import Left '@/components/Left.vue'
components: {
Left,
}
这里的注册名只用于组件的引用，如果组件内没有 组件内：
export default{
//当提供了name属性后，组件的名称就是name属性的值
name: 'MyRight'
}
组件内声明了 到此这篇关于 vue 动态组件component 的文章就介绍到这了,更多相关 vue 动态组件内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ |
请发表评论