Dynamic Components2019-04-13 22:51Dev, JavaScript, VueJS

动态组件 Dynamic Components

比如有时候我们要实现一些类似于 Tab 显示不同内容的功能:

上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现:

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中, currentTabComponent 可以包括

  • 已注册组件的名字
  • 一个组件的选项对象

一个完整的例子

<div id="app">
    <input type="button" value="切换到第1个组件" @click="tabComponent(1)" />
    <input type="button" value="切换到第2个组件" @click="tabComponent(2)" />
    <input type="button" value="切换到第3个组件" @click="tabComponent(3)" />
    <component :is="current"></component>
</div>

这里有三个按钮以及一个存放动态内容的 components

比较核心的用法就是里面这个 :is 参数:

这个参数在 current 改变的时候就会一起改变

  var custom1 = Vue.component("custom1", {
      template: `<div @click="changeDivbg">我是第1个组件</div>` ,
      methods: {
          changeDivbg(ev) {
              ev.target.style.background = "red";
          }
      }
  });
  var custom2 = Vue.component("custom2", {
      template: `<div>我是第2个组件</div>` 
  })
  var custom3 = Vue.component("custom3", {
      template: `<div>我是第3个组件</div>` 
  })

  new Vue({
      el: "#app",
      data: {
          current: custom1
      },
      methods: {
          tabComponent(index) {
              // 我们在这里修改了 current 的值, 我们将其指向的不同的 component
              if (index === 1) {
                  this.current = custom1
              } else if (index === 2) {
                  this.current = custom2
              } else if (index === 3) {
                  this.current = custom3
              }
          }
      }
  })
Powered by Remix
|
Designed by szhshp
|
Copyright © szhshp 2022