“Dynamically adding tags”, “dynamically adding attributes”, or “dynamically adding keywords” is a common scenario we encounter in projects.

Recently, while working on a project, I came across a case of adding attributes dynamically.

Typically in single-file component development mode, we create components as follows.

<template>
  <span></span>
</template>
<script>
export default {
  name: "Tag"
};
</script>
Copy the code

Then introduce it where it is needed.

<template>
  <div id="app">
    <tag></tag>
  </div>
</template>
<script>
import Tag from "./components/Tag";
export default {
  name: "app",
  components: { Tag }
};
</script>
Copy the code

The way data is manipulated

For example, if we implement a case of dynamically adding search terms, the usual way is to loop through components and then process the data.

<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>Copy the code

It’s easy to do this, but sometimes it’s not flexible enough to just put the template in place.

What if we wanted to create components anywhere, anytime (in any container)? This is what we need to say about “programmatically” creating components.

Today, I’ll show you how to dynamically load components by programmatically creating them.

Programmatically create components

Before I say “programming,” familiarize myself with a few apis.

  • Vue.extend() : A “subclass” can be created. The parameter is an object that contains component options.

  • PropsData: Props passed when creating an instance, used only in instances created by new.

  • $mount () :

If the Vue instance does not receive the EL option when instantiated, it is in the “unmounted” state and has no associated DOM elements. An unmounted instance can be manually mounted using vm.$mount().

If no parameters are provided, the template will be rendered as an element outside the document, and you must insert it into the document using the native DOM API.

Such as:

// Alternatively, render out of the document and then mount var Component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

Copy the code

With that in mind, let’s look at how to add components programmatically.

<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(a); this.$refs.container.appendChild(vm.$el); }}}; </script>Copy the code

As we can see, with the above implementation, we can add components to any container through the “$refs” property, and we can add them at any time programmatically through JavaScript.

Isn’t it cool? Let’s try it.

If it inspires you, give it a thumbs up.

Public number: six small dengdeng, more articles dry goods.