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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
js异或加解密效果代码
Jun 25 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
一文快速详解前端框架 Vue 最强大的功能
May 21 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
投票管理程序
2006/10/09 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
用原生js做单页应用
2017/01/17 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
Python中的闭包实例详解
2014/08/29 Python
python实现查询IP地址所在地
2015/03/29 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
python实现PID算法及测试的例子
2019/08/08 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
三八妇女节超市活动方案
2014/08/18 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang