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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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写MySQL数据 实现代码
2009/06/15 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
Javascript的this用法
2017/01/16 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
Python简单进程锁代码实例
2015/04/27 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
python sorted函数原理解析及练习
2020/02/10 Python
python手写均值滤波
2020/02/19 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
技术总监的工作职责
2013/11/13 职场文书
人事档案接收函
2014/01/12 职场文书
公民代理授权委托书
2014/09/24 职场文书
2014年技术部工作总结
2014/12/12 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
MySQL触发器的使用
2021/05/24 MySQL
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
python基础之文件操作
2021/10/24 Python