Vue一個案例引起的「編程式」建立組件

在項目的開發過程當中「動態添加標籤」，「動態添加屬性」，「或者動態添加關鍵詞」，是咱們在項目中常常遇到的一個場景。

最近在作項目時，就遇到了動態添加屬性的案例。

一般在單文件組件的開發模式中，咱們會以以下的方式建立組件。

<template>
  <span></span>
</template>
<script>
export default {
  name: "Tag"
};
</script>
複製代碼

而後在須要的地方引入使用便可。

<template>
  <div id="app">
    <tag></tag>
  </div>
</template>
<script>
import Tag from "./components/Tag";
export default {
  name: "app",
  components: { Tag }
};
</script>
複製代碼

操做數據的方式

好比咱們實現一個動態添加搜索關鍵詞的案例，一般的方式會經過循環組件而後處理數據的方式。

<template>
  <div id="app">
    <base-input v-for="item in keywords" :key="item.id" v-model="item.name"></base-input>
    <button class="add-btn" @click="addKeyWords">添加關鍵詞</button>
  </div>
</template>
<script>
import BaseInput from "./components/BaseInput";
export default {
  name: "app",
  components: { BaseInput },
  data() {
    return {
      keywords: []
    };
  },
  methods: {
    addKeyWords() {
      this.keywords.push({
        name: ""
      });
    }
  }
};
</script>
複製代碼

很簡單方便的能夠實現這個功能，但這種實現方式有時候不夠靈活，只能把模版放在既定的位置。

若是咱們想隨時隨地（任何容器）的建立組件該如何呢？這就是下面咱們須要說的「編程式」建立組件。

今天就來講說如何利用「編程式」建立組件的方式去實現動態加載組件。

編程式建立組件

在說「編程式」以前，先來熟悉幾個API。

• Vue.extend()：能夠建立一個「子類」。參數是一個包含組件選項的對象。

• propsData：建立實例時傳遞的 props，只用於 new 建立的實例中。

• $mount()：

若是 Vue 實例在實例化時沒有收到 el 選項，則它處於「未掛載」狀態，沒有關聯的 DOM 元素。可使用 vm.$mount() 手動地掛載一個未掛載的實例。

若是沒有提供參數，模板將被渲染爲文檔以外的的元素，而且你必須使用原生 DOM API 把它插入文檔中。

例如：

// 或者，在文檔以外渲染而且隨後掛載
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

複製代碼

熟悉以後，咱們就來看看如何使用編程式添加組件。

<template>
  <div id="app">
    <button class="add-btn" @click="addKeyWords">添加關鍵詞</button>
    <div ref="container" class="container"></div>
  </div>
</template>
<script>
import Vue from "vue";
import BaseInput from "./components/BaseInput";
export default {
  name: "app",
  methods: {
    addKeyWords() {
      var ComponentInput = Vue.extend(BaseInput);
      var vm = new ComponentInput({
        propsData: { value: "996" }
      });
      vm.$mount();
      this.$refs.container.appendChild(vm.$el);
    }
  }
};
</script>
複製代碼

咱們能夠看到，經過上面的實現以後，咱們能夠經過「$refs」屬性把組件添加到任何的容器中，並且咱們能夠經過 JavaScript 編程的方式隨時添加。

是否是很酷，小夥伴趕忙去試試吧。

若是文章對你有啓發，記得給個贊哦。

公衆號：六小登登，更多幹貨文章。