Vue组件的高级用法 动态组件

动态组件的使用方法

VUE给我们提供 了一个元素叫component

• 作用是： 用来动态的挂载不同的组件
• 实现：使用：is特性来进行实现的
  详解栗子：

  <!--父组件中的作用域-->
    <div id="app" style="border:2px solid green;height:400px;">
        <component :is="thisViem"></component>
        <button @click="handelViem('A')">第1句</button>
        <button @click="handelViem('B')">第2句</button>
        <button @click="handelViem('C')">第3句</button>
        <button @click="handelViem('D')">第4句</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <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: {
                // 定义默认值
                thisViem: 'compA'
            },
            methods: {
                handelViem: function(tag) {
                    // 传进来的 handelViem('A')
                    this.thisViem = 'comp' + tag
                    console.log('comp' + tag)
                }
            }
        })
    </script>