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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
javascript类继承机制的原理分析
Sep 12 Javascript
js的写法基础分析
Jan 17 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
Vue Element校验validate的实例
Sep 21 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
PHP数据库开发知多少
2006/10/09 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
JavaScript闭包详解
2015/02/02 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
值得收藏的10道python 面试题
2019/04/15 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
零基础小白多久能学会python
2020/06/22 Python
Python爬虫与反爬虫大战
2020/07/30 Python
Numpy数组的广播机制的实现
2020/11/03 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
应用英语专业自荐信
2014/01/26 职场文书
基督教婚礼主持词
2014/03/14 职场文书
幽默导游词开场白
2015/05/29 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
nginx共享内存的机制详解
2022/03/21 Servers