Vue 动态组件components和v-once指令的实现


Posted in Javascript onAugust 30, 2019

一、实现两个组件间互相展示、互相隐藏

<!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>

页面效果图如下:

Vue 动态组件components和v-once指令的实现 

二、动态组件,简化页面代码

使用:父组件 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,可以有效提高静态内容的展示效率,提高性能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js写一个字符串转成驼峰的实例
Jun 21 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
Node.js笔记之process模块解读
May 31 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 #Javascript
vuex vue简单使用知识点总结
Aug 29 #Javascript
js中的this的指向问题详解
Aug 29 #Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 #Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 #Javascript
微信小程序实现购物车代码实例详解
Aug 29 #Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 #Javascript
You might like
linux下为php添加curl扩展的方法
2011/07/29 PHP
PHP5函数小全(分享)
2013/06/06 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
简单了解Django模板的使用
2017/12/20 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
SQL语言面试题
2013/08/27 面试题
初二政治教学反思
2014/01/12 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
2014年市场部工作总结
2014/11/25 职场文书
优秀党员个人总结
2015/02/14 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
2016年情人节问候语
2015/11/11 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
导游词之太湖
2019/10/08 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python