Vue一个案例引发的「编程式」创建组件

六小登登

发布于 2019-04-17 17:42:08

5260

发布于 2019-04-17 17:42:08

文章被收录于专栏：Modeng的专栏 Modeng的专栏Modeng的专栏

在项目的开发过程中「动态添加标签」，「动态添加属性」，「或者动态添加关键词」，是我们在项目中经常遇到的一个场景。

最近在做项目时，就遇到了动态添加属性的案例。

通常在单文件组件的开发模式中，我们会以如下的方式创建组件。

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

是不是很酷，小伙伴赶紧去试试吧。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019年04月04日，如有侵权请联系 cloudcommunity@tencent.com 删除

api