Vue动态组件 component :is的使用

vue 动态组件用于实现在指定位置上,动态加载不同的组件,核心代码为

data() {
    return {
        componentTag: '',
    }
}

componentTag 为自定义的变量,将需要加载的组件名赋值给它,即可在标签出现的位置,渲染该组件。

代码示范



src/page/component1.vue



src/page/component2.vue



src/page/component3.vue



效果展示

  • 点击按钮组件1

Vue动态组件 component :is的使用_第1张图片

  • 点击按钮组件2

Vue动态组件 component :is的使用_第2张图片

  • 点击按钮组件3

Vue动态组件 component :is的使用_第3张图片

你可能感兴趣的:(vue.js,javascript,前端)