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 保存数组到Cookie的代码
Apr 14 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
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
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
jquery实现拖动效果
2016/08/10 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
python实现ID3决策树算法
2018/08/29 Python
python实现两张图片的像素融合
2019/02/23 Python
详解python持久化文件读写
2019/04/06 Python
Python实现上下文管理器的方法
2020/08/07 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
python自动生成证件号的方法示例
2021/01/14 Python
乐观大学生的自我评价
2014/01/10 职场文书
高中军训感言600字
2014/03/11 职场文书
劲霸男装广告词
2014/03/21 职场文书
植树节口号
2014/06/21 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
天鹅湖观后感
2015/06/09 职场文书
红色经典观后感
2015/06/18 职场文书
python爬虫--selenium模块
2021/03/31 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android