Vue-动态组件

动态组件

• Props：

  • is - string | ComponentDefinition | ComponentConstructor
  • inline-template - boolean

• 用法：

  渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

  <!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
  <component :is="componentId"></component>
  
  <!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
  <component :is="$options.components.child"></component>
  

• 参考：动态组件

• 实例

  <div id="box">
      <!-- <home v-if='type==="home"'></home>
  <list v-else-if='type==="list"'></list>
  <shopbar v-else='type==="shopbar"'></shopbar> -->
      <keep-alive>
          <component :is="type"></component>
      </keep-alive>
      <footer>
          <ul>
              <li @click='type="home"'>首页</li>
              <li @click='type="list"'>列表</li>
              <li @click='type="shopbar"'>购物车</li>
          </ul>
      </footer>
  </div>
  

  Vue.component("home", {
      template: `<div>home--<input></div>`
  })
  Vue.component("list", {
      template: `<div>list</div>`
  })
  Vue.component("shopbar", {
      template: `<div>shopbar</div>`
  })
  new Vue({
      el: '#box',
      data: {
          type: 'home',
      }
  })