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 打印页面代码
Mar 24 Javascript
JavaScript与DropDownList 区别分析
Jan 01 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
Python制作动态字符画的源码
2021/08/04 Python
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js
Java实现带图形界面的聊天程序
2022/06/10 Java/Android