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 程式設計的方式隨時新增。

是不是很酷，小夥伴趕緊去試試吧。

如果文章對你有啟發，記得給個贊哦。
公眾號：六小登登，更多幹貨文章。
人人都可以成為高手。一個愛寫作的技術人。歡迎交流。