vue 动态组件用法示例小结


Posted in Javascript onMarch 06, 2020

本文实例讲述了vue 动态组件用法。分享给大家供大家参考,具体如下:

通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换。根据 v-bind:is="组件名" 中的组件名去自动匹配组件,如果匹配不到则不显示。

改变挂载的组件,只需要修改is指令的值即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 动态组件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
 <button @click='toShow'>点击显示子组件</button>
 <component v-bind:is="which_to_show"></component>
</div>

<script>

// 创建根实例
new Vue({
 el: '#app',
 data:{
  which_to_show:'first'
 },
 methods:{
 toShow:function(){
  var arr = ["first","second","third"];
  var index = arr.indexOf(this.which_to_show);
  if(index<2){
  this.which_to_show = arr[index+1];
  }else{
  this.which_to_show = arr[0];
  }
 }
 },
 components:{
 first:{
  template:'<div>这是子组件1<div>'
 },
 second:{
  template:'<div>这是子组件2<div>'
 },
 third:{
  template:'<div>这是子组件3<div>'
 },
 }
})
</script>
</body>
</html>

vue 动态组件用法示例小结

#keep-alive

动态切换掉的组件(非当前显示的组件)是被移除掉了,如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 动态组件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
 <button @click='toShow'>点击显示子组件</button>
 <!----或者<component v-bind:is="which_to_show" keep-alive></component>也行----->
 <keep-alive>
 <component v-bind:is="which_to_show" ></component>
 </keep-alive>
</div>

<script>

// 创建根实例
new Vue({
 el: '#app',
 data:{
  which_to_show:'first'
 },
 methods:{
 toShow:function(){
  var arr = ["first","second","third"];
  var index = arr.indexOf(this.which_to_show);
  if(index<2){
  this.which_to_show = arr[index+1];
  }else{
  this.which_to_show = arr[0];
  } console.log(this.$children); 
 }
 },
 components:{
 first:{
  template:'<div>这是子组件1<div>'
 },
 second:{
  template:'<div>这是子组件2<div>'
 },
 third:{
  template:'<div>这是子组件3<div>'
 },
 }
})
</script>
</body>
</html>

说明:

初始情况下,vm.$children属性中只有一个元素(first组件),

点击按钮切换后,vm.$children属性中有两个元素,

再次切换后,则有三个元素(三个子组件都保留在内存中)。

之后无论如何切换,将一直保持有三个元素。

actived钩子

可以延迟执行当前的组件。

具体用法来说,activate是和template、data等属性平级的一个属性,形式是一个函数,函数里默认有一个参数,而这个参数是一个函数,执行这个函数时,才会切换组件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 动态组件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
 <button @click='toShow'>点击显示子组件</button>
 <!----或者<component v-bind:is="which_to_show" keep-alive></component>也行----->
 <keep-alive>
 <component v-bind:is="which_to_show" ></component>
 </keep-alive>
</div>

<script>

// 创建根实例
var vm = new Vue({
    el: '#app',
    data: {
      which_to_show: "first"
    },
    methods: {
      toShow: function () {  //切换组件显示
        var arr = ["first", "second", "third", ""];
        var index = arr.indexOf(this.which_to_show);
        if (index < 2) {
          this.which_to_show = arr[index + 1];
        } else {
          this.which_to_show = arr[0];
        }
        console.log(this.$children);
      }
    },
    components: {
      first: { //第一个子组件
        template: "<div>这里是子组件1</div>"
      },
      second: { //第二个子组件
        template: "<div>这里是子组件2,这里是延迟后的内容:{{hello}}</div>",
        data: function () {
          return {
            hello: ""
          }
        },
        activated: function (done) { //执行这个参数时,才会切换组件
   console.log('hhh')
          var self = this;
   var startTime = new Date().getTime(); // get the current time
   //两秒后执行
          while (new Date().getTime() < startTime + 2000){
   self.hello='我是延迟后的内容';
   }

        }
      },
      third: { //第三个子组件
        template: "<div>这里是子组件3</div>"
      }
    }
  });
</script>
</body>
</html>

vue 动态组件用法示例小结

当切换到第二个组件的时候,会先执行activated钩子,会在两秒后显示组件2.起到了延迟加载的作用。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
javascript 强制刷新页面的实现代码
Dec 13 Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
微信小程序实现点赞业务
Feb 10 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 #Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 #Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 #Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 #Javascript
JS实现网页端猜数字小游戏
Mar 06 #Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 #Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 #Javascript
You might like
大师制作的中短波矿石收音机
2020/04/02 无线电
php记录日志的实现代码
2011/08/08 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
python字典一键多值实例代码分享
2019/06/14 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
python序列化与数据持久化实例详解
2019/12/20 Python
python 6种方法实现单例模式
2020/12/15 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
销售文员岗位职责
2013/11/29 职场文书
个人求职信范文分享
2013/12/13 职场文书
教师实习自我鉴定
2013/12/14 职场文书
保护动物倡议书
2014/04/15 职场文书
2014年转正工作总结
2014/11/08 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android