Vue核心技术-26,动态组件

一,前言

这一篇介绍一下Vue动态挂载组件的实现

---

二,动态组件

Vue提供了元素,配合is特性选择要挂在的主键,实现动态挂载不同组件

<div id="app">
    <component :is="dynamic">component>
div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data:{
            dynamic:'comA'
        },
        // 多组件
        components:{
            comA:{
                template:'
组件A
'
            },
            comB:{
                template:'
组件B
'
            }
        }
    })
script>

运行结果:
初始化根据dynamic指定的组件名挂载需要显示的组件

通过devTools修改dynamic指定的组件名,动态修改组件挂载

通过动态的改变:is绑定的dynamic值(修改组件名称),可以实现动态挂载组件

不仅可以根据组件名称进行动态挂载,还可以通过更改组件对象实现动态挂载

<div id="app">
    <component :is="dynamic">component>
div>

<script type="text/javascript">
    // 多组件对象
    var comA = {
        template:'
组件A
'
    }
    var comB = {
        template:'
组件B
'
    }
    var comC = {
        template:'
组件C
'
    }

    var vm = new Vue({
        el: '#app',
        data:{
            dynamic: comA
        }
    })
script>

运行结果和之前相同,区别在于dynamic值为组件对象,而不再是组件名称

---

三,结尾

动态组件的使用就介绍到这里,相信在某些场景下还是非常有用的
下一篇介绍异步组件,通过异步加载组件实现对页面性能的优化