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 编程的方式随时添加。

是否是很酷，小伙伴赶忙去试试吧。

若是文章对你有启发，记得给个赞哦。

公众号：六小登登，更多干货文章。