阅读 95

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

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

如果文章对你有启发,记得给个赞哦。

公众号:六小登登,更多干货文章。