189、v-bind:is实现动态组件的效果

下面例子创建一个包含多个子组件的 vue 实例。
1. vue代码部分:新建 vue 实例 "app",这个实例的 components 里面,有3个组件,这些组件都有各自的模板。
分别是 acomp,bcomp,ccomp
2. html 代码部分:使用vue 的内置组件 <component></component>,并使用 "is" 特性(需要通过v-bind 给 "is" 绑定一个值)。
"is" 绑定的值传入一个组件名,就会切换到这个组件。

<div id="app">
<component v-bind:is="whichcomp"></component>
<button v-on:click="choosencomp('a')">a</button>
<button v-on:click="choosencomp('b')">b</button>
<button v-on:click="choosencomp('c')">c</button>
</div>
//做一个包含列表组件
//需要给组件创建props--"todos",用于存放组件通过绑定prop --"todo"获取实例中的data数据"todolists"
var app=new Vue({
  el: '#app',
    components:{
        acomp:{
           template:`
                <p>这里是组件A</p>
            `
            },
        bcomp:{
           template:`
                <p>这里是组件B</p>        `
        },
        ccomp:{
            template:`
                <p>这里是组件C</p>
        `
        }},
    data:{whichcomp:""},
    methods:{
       choosencomp:function(x){
       this.whichcomp=x+"comp"}
   }
})

来源:https://blog.csdn.net/weixin_41796631/article/details/83387304

猜你喜欢

转载自www.cnblogs.com/gushixianqiancheng/p/12625341.html