vue 动态组件用法示例小结

更新时间：2020年03月06日 10:57:46 作者：程序媛-jjl

这篇文章主要介绍了vue 动态组件用法,结合实例形式总结分析了vue 动态组件基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下

本文实例讲述了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>

#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>

当切换到第二个组件的时候，会先执行activated钩子，会在两秒后显示组件2.起到了延迟加载的作用。

希望本文所述对大家vue.js程序设计有所帮助。

您可能感兴趣的文章:

Vue.js中v-model指令的用法介绍
这篇文章介绍了Vue.js中v-model指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-03-03
vue调用摄像头进行拍照并能保存到本地的方法
本文主要介绍了vue调用摄像头进行拍照并能保存到本地的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue3继承并扩展三方组件完成二次封装的示例详解
这篇文章主要介绍了vue3继承并扩展三方组件完成二次封装,文章使用naiveui的Input组件进行举例,elementPlus或者其他组件库同理,并通过代码示例讲解的非常详细,需要的朋友可以参考下
2024-03-03
深入理解Vue-cli搭建项目后的目录结构探秘
本篇文章主要介绍了深入理解Vue-cli搭建项目后的目录结构探秘，具有一定的参考价值，有兴趣的可以了解一下
2017-07-07
Vue 调用摄像头扫描条码功能实现代码
本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流程,同时,还强调了浏览器兼容性、HTTPS环境、权限问题和性能优化的重要性,感兴趣的朋友一起看看吧
2025-03-03
Vue.js中关于“{{}}”的用法
这篇文章主要介绍了Vue.js中关于“{{}}”的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
详解Vue调用手机相机和相册以及上传
这篇文章主要介绍了Vue调用手机相机及上传，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue应用中504错误（Gateway timeout）的原因与解决方法
在Vue前端应用中遇到504代理错误通常是由于请求在到达服务器之前超时,504错误表示网关超时,可能由后端服务响应慢、网络问题、代理配置错误、请求负载过大、前端请求超时设置不当、服务器资源不足或第三方服务问题引起
2024-09-09
Vue实现用户没有登陆时,访问后自动跳转登录页面的实现思路
这篇文章主要介绍了Vue实现用户没有登陆时，访问后自动跳转登录页面,定义路由的时候配置属性，这里使用needLogin标记访问页面是否需要登录，本文通过实例代码介绍的非常详细，需要的朋友可以参考下
2023-02-02
ElementUI+命名视图实现复杂顶部和左侧导航栏
本文主要介绍了ElementUI+命名视图实现复杂顶部和左侧导航栏，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04

vue 动态组件用法示例小结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具