来源:https://blog.csdn.net/weixin_41796631/article/details/83387304
一、在内置组件<component>里面使用 v-bind: is。<component> 元素是vue 里面的一个内置组件。 下面例子创建一个包含多个子组件的 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> 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"} } }) 二、在内置组件<keep-alive>的子组件里使用name属性 <keep-alive include="PageA" > <router-view /> </keep-alive>