动态组件

component

1. component配合is属性，决定显示的组件是哪个

(1) 首先定义三个组件。

(2) 添加三个按钮， 并添加点击事件。

(3) 给 component 组件添加 is 属性。

(4) (2)中的点击事件值， 是 is 属性的值 等于 组件名称。

补充:(keep-alive)

(1)keep-alive 保证组件切换数据不被销毁

代码展示

# ---------------------------------------HTML 代码------------------------------------
    <div id="app" ref="reference">
        <button @click="who='commodity'">商品</button>
        <button @click="who='order'">订单</button>
        <button @click="who='detail'">详情</button>

        <keep-alive>
            <component :is="who">
            </component>
        </keep-alive>
    </div>

# ------------------------------------JavaScript 代码------------------------------------
    Vue.component('commodity', {
        template: `
                    <div class="item">
                        <h1>商品</h1>
                    </div>`,
    })
    Vue.component('order', {
        template: `
                <div class="item">
                    <h1>订单</h1>
                    <input type="text">
                </div>`,
    })
    Vue.component('detail', {
        template: `
                <div class="item">
                    <h1>详情</h1>
                </div>`,
    })