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 相关文章推荐
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
微信小程序实现简单购物车功能
Dec 30 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/03/04 星际争霸
PHP中如何调用webservice的实例参考
2013/04/25 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
vue滚动tab跟随切换效果
2020/06/29 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Python的缺点和劣势分析
2019/11/19 Python
Python猜数字算法题详解
2020/03/01 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
优秀员工表扬信
2014/01/17 职场文书
酒店管理求职信
2014/06/09 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android