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 相关文章推荐
JavaScript打字小游戏代码
Dec 26 Javascript
JavaScript网页定位详解
Jan 13 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
js实现数组转换成json
Jun 26 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
vue debug 二种方法
Sep 16 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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 模拟POST|GET操作实现代码
2010/07/20 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python3.5安装python3-tk详解
2019/04/26 Python
Python中一些深不见底的“坑”
2019/06/12 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
平面设计的岗位职责
2013/11/08 职场文书
公司拓展活动方案
2014/02/13 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
技术员岗位职责范本
2015/04/11 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
MySQL插入数据与查询数据
2022/03/25 MySQL