组件(6)：动态组件

chuyao 发布于2019-08-01 18:41 / 517人阅读

摘要：组件的动态切换父组件可以通过元素，在其特性上绑定一个属性，该属性的值表示了一个子组件，可以是一个对象，或字符串子组件名称。可以发现，使用属性观察可用组件个数时始终不超过，这是因为每次切换，旧的组件将被直接移除，下次切换时要重新渲染。

组件的动态切换

父组件可以通过元素，在其特性is上绑定一个属性，该属性的值表示了一个子组件，可以是一个对象，或字符串（子组件名称）。

页面绑定：
父组件组件内定义：currentView:"childName|childObj"

这样父组件就可以通过一个方法，在一个挂载点上动态的切换多个子组件的显示。

var external = {
    template: "refer external object "
}
new Vue({
    el: "#app-1",
    data: {
        currentView: external
    },
    methods: {
        switchCpt: function(){
            var arr = [external,"home","posts","archive"]
            var index = arr.indexOf(this.currentView)
            if(index < 4){
                this.currentView = arr[index+1]
            }else{
                this.currentView = arr[0]
            }
        }
    },
    components: {
        home: {
            template: "component home"
        },
        posts: {
            template: "component posts"
        },
        archive: {
            template: "component archive"
        }
    }
})


    
    
    内存中保留的组件个数:{{$children.length}}

点击按钮，在不同的子组件之间切换显示。
可以发现，使用$children属性观察可用组件个数时始终不超过1，这是因为每次切换，旧的组件将被直接移除，下次切换时要重新渲染。如果要在内存中保留所有组件，需要使用keep-alive元素。

keep-alive

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染，为此就需要使用keep-alive。
javascript代码不变，修改html，使用包围组件。


    
    
        
    
    内存中保留的组件个数:{{$children.length}}

结果是渲染过的组件都被保留了。

GPU云服务器云服务器 vuejs动态组件父子组件-动态渲染动态添加组件微信泛型动态添加组件c

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51995.html

组件(6)：动态组件

摘要：组件的动态切换父组件可以通过元素，在其特性上绑定一个属性，该属性的值表示了一个子组件，可以是一个对象，或字符串子组件名称。可以发现，使用属性观察可用组件个数时始终不超过，这是因为每次切换，旧的组件将被直接移除，下次切换时要重新渲染。组件的动态切换父组件可以通过元素，在其特性is上绑定一个属性，该属性的值表示了一个子组件，可以是一个对象，或字符串（子组件名称）。页面绑定：父组件组件...

eccozhou 2019-08-22 15:25 评论0 收藏0
BREW精要之COM 模型

摘要：与使用作为接口的唯一标识类似，使用称之为的一个字节无符号整数作为唯一标识。接口是客户程序和组件程序之间的桥梁，接口应该具有不变性，并且一个对象也应该支持多个接口。 COM是Component Object Model （组件对象模型）的缩写。BREW基本上遵从COM这一组件构架的。组...

lily_wang 2021-11-22 15:22 评论0 收藏0
vue轻量级后台管理系统基础模板

摘要：具体实现请查看和的退出登陆回调方法。现在除了必要的页面需要在一开始添加到路由表里，其他的页面都可以根据后台数据来自动生成。另外，如果在未登陆时要访问某一指定页面，会重定向到登陆页，登陆成功后会自动跳到这个指定页面。项目地址 vue-admin-template 在线预览更新 2019.6.25 更新修复路由表冲突问题退出当前用户，换账号重新登陆时，上个账号和现在的账号路由表会有...

2shou 2019-08-23 14:17 评论0 收藏0
后端开发者的Vue学习之路（三）

摘要：使用组件全局定义组件，第一个参数是组件名，的值是组件的内容这是个待办项实例化是必须的，要把使用组件的区域交给管理局部注册组件局部注册组件全局注册往往是不够理想的。目录上节内容回顾组件什么是组件组件注册全局注册组件局部注册组件 ...

番茄西红柿 2019-04-23 11:51 评论0 收藏0
vue2.0指不了南

摘要：回调函数会接收所有传入事件触发函数的额外参数。添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。零．混沌 vue是什么 vue是一套构建用户界面的渐进式框架。他的特点：简洁：页面由HTML模板+Json数据+Vue实例组成数据驱动：自动计算属性和追踪依赖的模板表达式组件化：用可复用、解耦的组件来构造页面轻量：代码量小，不依赖其他库快速：精确有...

张红新 2019-08-20 15:31 评论0 收藏0