Vue 动态组件components和v-once指令的实现
时间:2019-08-30
本文章向大家介绍Vue 动态组件components和v-once指令的实现,主要包括Vue 动态组件components和v-once指令的实现使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、实现两个组件间互相展示、互相隐藏
<!DOCTYPE html> <html> <head> <title>动态组件</title> <script type="text/javascript" src="./vue-dev.js"></script> </head> <body> <div id="app"> <child-one v-if="type=='child-one'" content="child-one"></child-one> <child-two v-if="type=='child-two'" content="child-two"></child-two> <button @click="handleChangeEvent">change</button> </div> <script type="text/javascript"> Vue.component('child-one', { props: ["content"], template: `<div>{{content}}</div>`, }); Vue.component('child-two', { props: ["content"], template: `<div>{{content}}</div>`, }) var vm = new Vue({ el: '#app', data(){ return{ type:'child-one' } }, methods:{ handleChangeEvent:function(){ this.type= this.type=="child-one" ? 'child-two':'child-one'; } } }) </script> </body> </html>
页面效果图如下:
二、动态组件,简化页面代码
使用:父组件 dom标签使用 ,对组件名称进行绑定
<div id="app"> <!-- <child-one v-if="type=='child-one'" content="child-one"></child-one> <child-two v-if="type=='child-two'" content="child-two"></child-two> --> <!--动态组件标签component 利用is接收指定标签组件--> <component :is="type" :content="type"></component> <button @click="handleChangeEvent">change</button> </div>
无论使用v-if还是components来使用动态组件的实现,都是在点击交互后,每一次页面效果的切换,会自动销毁前一个组件,再重新创建一个组件,页面则显示响应的内容, 这样的实现方式是比较消耗性能的
三、 v-show和v-once
使用v-show,则会只是隐藏在dom元素中,组件都会被创建。
在子组件中,加入v-once,当每次切换组件效果时,不再需要每次都经过创建-销毁的过程,而是在内存中直接取用上一次使用过的组件的内容
Vue.component('child-one',{ template:'<div v-once>child-one</div>' }) Vue.component('child-two',{ template:'<div v-once>child-two</div>' })
使用v-once,可以有效提高静态内容的展示效率,提高性能
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Android 内存泄露简介、典型情景及检测解决
- [原创]Fluent NHibernate之旅
- 复杂而艰辛的重构之路--起步
- 【强烈推荐】数据库迁移利器:Migrator.Net
- 关于某道C#上机题的OO
- Android 事件处理探险
- Fluent NHibernate RC 1.0 --升级内容
- 驳“反驳老赵之“伪”递归”
- 关于今天很热的--FizzBuzzWhizz
- 了解EF CodeFirst的Migrator功能与Migrator.Net对比
- struts技术的logic标签
- 【翻译】使用Visual Studio创建Asp.Net Core MVC (一)
- 你不知道的Javascript:有趣的setTimeout
- ADO.NET 2.0 中的新增 DataSet 功能
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 2019.8.15乘兴打Codeforces Round #569 (Div. 2)小记
- Codeforces Beta Round #14 (Div. 2)A. Letter
- Vue 改变数据,页面不刷新的问题
- R语言再保险合同定价案例研究
- 开发一个简单的 Vue 弹窗组件
- R语言模拟人类生活预期寿命动态可视化动画图gif
- Vue 动态添加路由及生成菜单
- R语言泊松回归对保险定价建模中的应用:风险敞口作为可能的解释变量
- Vue 页面权限控制和登陆验证
- Codeforces Round #502 (in memory of Leopoldo Taravilse, Div. 1 + Div. 2)C. The Phone Number
- Codeforces Beta Round #3 C. Tic-tac-toe
- [记录] 数据库中,根据经纬度,查询距离最近的地点
- PAT (Basic Level) Practice (中文)1010 一元多项式求导 (25 分)
- R语言随机森林模型中具有相关特征的变量重要性
- PAT (Basic Level) Practice (中文)1009 说反话 (20 分)