vue中的动态组件

在我们平时使用vue中的模板的时候，许多时候都是直接定义成一个固定的模板，但是，vue中提供了一个动态模板，可以在任意模板中切换，就是用vue中<component>用:is来挂载不同的组件。<div id="app" v-cloak><component :is="currentView&quot

苏墨晨

8641人浏览 · 2018-03-15 20:01:37

苏墨晨 · 2018-03-15 20:01:37 发布

在我们平时使用vue中的模板的时候，许多时候都是直接定义成一个固定的模板，但是，vue中提供了一个动态模板，可以在任意模板中切换，就是用vue中<component>用:is来挂载不同的组件。

<div id="app" v-cloak>
        <component :is="currentView"></component>
        <button @click="handleChangeView('A')">A</button>
        <button @click="handleChangeView('B')">B</button>
        <button @click="handleChangeView('C')">C</button>
</div>

<script>
        var app = new Vue({
            el: '#app',
            components:{
                comA:{
                    template:`
                        <div>组件A</div>
                    `
                },
                comB:{
                    template:`
                        <div>组件B</div>
                    `
                },
                comC:{
                    template:`
                        <div>组件C</div>
                    `
                }
            },
            data:{
                currentView:'comA'
            },
            methods:{
                handleChangeView:function(component){
                    this.currentView='com'+component;
                }
            }
        });
</script>

我们在components中注册了三个模板，当我们点击当前按钮的时候，就会将模板切换模板，可以说是非常方便了。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^