189、动态组件效果的实现方案

来源: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>

猜你喜欢

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