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 相关文章推荐
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
全面分析JavaScript 继承
May 30 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 Javascript
四十九个javascript小知识实用技巧
Nov 20 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
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
经验几则 推荐
2006/09/05 Javascript
js 操作符实例代码
2009/10/24 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
详解Flask前后端分离项目案例
2020/07/24 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
init进程的作用
2012/04/12 面试题
电子商务专业实习生自我鉴定
2013/09/24 职场文书
副厂长岗位职责
2014/02/02 职场文书
物流业务员岗位职责
2014/02/08 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
北京奥运会口号
2014/06/21 职场文书
违章停车检讨书
2014/10/21 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
二手车转让协议书
2015/01/29 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python
vue封装数字翻牌器
2022/04/20 Vue.js