vue学习笔记之动态组件和v-once指令简单示例
作者：Rachel~Liu 时间：2024-01-01 07:50:52
本文实例讲述了vue动态组件和v-once指令。分享给大家供大家参考，具体如下：
点击按钮时，自动切换两个组件
<component :is="type"></component>，当点击按钮之后，会自动清除原来的组件，显示新的组件。
每一次切换，都需要销毁+创建
但是这样消耗有点大，所以我们在子组件中引用了v-once指令，这样可以将显示在页面中的组件存到内存中，不会完全销毁。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态组件和v-once指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<component :is="type"></component>
<!-- <child-one v-if="type === 'child-one'"></child-one>-->
<!-- <child-two v-if="type === 'child-two'"></child-two>-->
<button @click="handleBtnClick">change</button>
</div>
</body>
</html>
<script>
Vue.component('child-one', {
template: '<div v-once>child-one</div>'
})
Vue.component('child-two', {
template: '<div v-once>child-two</div>'
})
var vm = new Vue({
el: '#app',
data: {
type: 'child-one'
},
methods: {
handleBtnClick: function () {
this.type = (this.type === 'child-one' ? 'child-two' : 'child-one');
}
}
})
</script>
运行结果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
来源：https://blog.csdn.net/qq_33866063/article/details/89791212
标签：vue,动态组件,v-once指令
0
投稿猜你喜欢
python多线程实现动态图绘制
2023-10-22 21:53:53
python 使用plt画图,去除图片四周的白边方法
2022-02-07 19:34:41
Python requests库参数提交的注意事项总结
2021-11-18 19:40:18
微信小程序使用自定义组件导航实现当前页面高亮
2024-04-22 12:50:16
MySQL学习笔记之创建、删除、修改表的方法
2024-01-16 15:14:52
python数字图像处理像素的访问与裁剪示例
2023-05-12 11:07:20
python字典DICT类型合并详解
2023-01-03 07:37:12
Pytorch对Himmelblau函数的优化详解
2023-03-02 09:29:33
Python项目 基于Scapy实现SYN泛洪攻击的方法
2023-01-15 01:34:30
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2021-06-11 19:47:32
vue下拉菜单组件（含搜索）的实现代码
2024-05-09 15:18:57
keras 读取多标签图像数据方式
2021-01-30 18:26:48
python中的eval函数使用实例
2021-06-20 00:34:07
在Windows下安装配置CPU版的PyTorch的方法
2023-07-18 15:04:17
关于networkx返回图的邻接矩阵问题
2021-04-09 13:10:35
js取得当前网址
2024-04-10 11:03:14
Bootstrap媒体对象的实现
2024-04-22 22:42:23
JavaScript正则表达式验证中文实例讲解
2024-04-10 10:55:59
[奇招] JS暴虐查找算法
2008-07-06 21:17:00
Go语言递归函数的具体实现
2023-08-05 02:35:32