vue 动态组件

component

• Vue 提供了一个 component 元素，可以用来动态挂载不同的组件，使用 is 特性来切换不同的组件。

需求:通过点击不同的按钮切换不同的视图

• 准备好四个组件和四个按钮

   <div id="app">
        <component></component>
        <button >1</button>
        <button >2</button>
        <button >3</button>
        <button >4</button>
    </div>

    <script>
       
        Vue.component('compA', {
            template: '<div>离离原上草</div>'
        })
        Vue.component('compB', {
            template: '<div>一岁一枯荣</div>'
        })
        Vue.component('compC', {
            template: '<div>野火烧不尽</div>'
        })
        Vue.component('compD', {
            template: '<div>春风吹又生</div>'
        })


        var app = new Vue({
            el: '#app',
            data: {
               
            },
    </script>

• 让 component 默认显示 A-component

    <div id="app">
        <component :is="thisView"></component> //用 is 动态绑定 thisView
        <button >1</button>
        <button >2</button>
        <button >3</button>
        <button >4</button>
    </div>
var app = new Vue({
  el: '#app',
  data: {
    thisView: 'A-component'  //  thisView 的值是 A-component
  }
})

• 添加点击事件，显示不同的诗句（视图）

    <div id="app">
        <component :is="thisView"></component> 用 is 动态绑定 thisView
        <button @click="handView('A')">1</button>
        <button @click="handView('B')">2</button>
        <button @click="handView('C')">3</button>
        <button @click="handView('D')">4</button>
    </div>

 <script>
        //需求:通过点击不同的按钮切换不同的视图
        Vue.component('compA', {
            template: '<div>离离原上草</div>'
        })
        Vue.component('compB', {
            template: '<div>一岁一枯荣</div>'
        })
        Vue.component('compC', {
            template: '<div>野火烧不尽</div>'
        })
        Vue.component('compD', {
            template: '<div>春风吹又生</div>'
        })
        var app = new Vue({
            el: '#app',
            data: {
                thisView :'compA'
            },
            methods: {
                handView: function (tag) {
                    this.thisView = 'comp' + tag
                    console.log(this.thisView)
                }
            }
        })
    </script>

点击不同的按钮，显示不同诗句（视图）。

动态组件的体现

component 元素就是动态的，当你点击第一个按钮，component 就挂载了 compA 组件，点击第二个按钮，component 就挂载了 compB 组件，以此类推。所以，component 就可以看做是一个变来变去（动态）的组件。