Vue — динамически создавать зарегистрированные компоненты

Vue.js

Прежде чем погрузиться в динамическое создание компонентов Vue, давайте взглянем на общую форму объявления компонентов.

Компоненты Vue обычно могут быть объявлены двумя способами: один черезVue.component, другойSingle File Components（SFC）Компоненты одного файла.

Общее декларирование и регистрация компонентов

// 定义一个名为 button-counter 全局注册的组件
Vue.component("button-counter", {
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
  data() {
    return {
      count: 0
    }
  }
});

new Vue({
  template: `
    <div id="app">
      <h1>App Component</h1>
      <button-counter></button-counter>
    </div>
  `
}).$mount("#app");

В приведенном выше коде мы объявляем функцию с именемbutton-counterс компонент. Если вы используете его в обычных условиях, вам нужно только написать соответствующий<button-counter></button-counter>Этикетки достаточно. Глобальное создание зарегистрированных компонентов может обеспечить динамическое создание, но мы должныtemplateОбъявите использование компонента, и не рекомендуется регистрировать все компоненты глобально.

существуетофициальная документация, мы видим, что, Мы можем зарегистрировать компонент с помощью Vue.component('component-name') . И экземпляр компонента имеет$mountТакой метод, официальный$mountобъясняется следующим образом:

vm.$mount( [elementOrSelector] )
Arguments:

{Element | string} [elementOrSelector]
{boolean} [hydrating]
Returns: vm - the instance itself

Usage:

Если экземпляр Vue не получил параметр el при создании экземпляра, он будет в «размонтированном» состоянии без связанного с ним элемента DOM.vm.$mount() можно использовать для ручного запуска монтирования размонтированного экземпляра Vue.

If elementOrSelector argument is not provided, the template will be rendered as an off-document element, and you will have to use native DOM API to insert it into the document yourself.

The method returns the instance itself so you can chain other instance methods after it.

Так можем ли мы удовлетворить наши потребности таким образом?

недостаточно!

Почему? ? ?

потому чтоVue.componentВозвращаемый результат представляет собойfunction! Он возвращает не экземпляр компонента, а конструктор.

Так вот, собственно. дляVue.componentЗаявленные компоненты мы сначала проходимVue.componentПолучите его конструктор, а затемnewиз экземпляра компонента и, наконец, через$mountМонтировать в html.

// 定义一个名为 button-counter 全局注册的组件
Vue.component("button-counter", {
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
  data() {
    return {
      count: 0
    }
  }
});

new Vue({
  template: `
    <div id="app">
      <h1>App Component</h1>
      <button @click="insert">click to insert button-counter comonent</button>
      <div id="insert-container"></div>
    </div>
  `,
  methods: {
    insert() {
      const ButtonCounter = Vue.component("button-counter"); // 只能查找到全局注册到组件
      const instance = new ButtonCounter();
      instance.$mount("#insert-container");
    }
  }
}).$mount("#app");

В приведенном выше кодеVue.componentСначала получите конструктор компонента, затем создайте экземпляр, обработайте данные и смонтируйте узлы с помощью некоторых методов экземпляра. Но мы нашлиVue.componentОтвечает только за глобальную регистрацию или поиск.

Если вы хотите использовать динамическое создание и добавление для локально зарегистрированных компонентов, нам нужно использоватьVue.extendБазовый конструктор Vue создает для этой цели «подклассы». фактическиVue.componentКогда параметр, переданный в метод, является объектом, Vue автоматически вызываетVue.extend.

Полный пример кода:

const ButtonCounterComponent = {
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
  data() {
    return {
      count: 0
    }
  }
};

new Vue({
  template: `
    <div id="app">
      <h1>App Component</h1>
      <button @click="insert">click to insert button-counter comonent</button>
      <div id="insert-container"></div>
    </div>
  `,
  methods: {
    insert() {
      const ButtonCounter = Vue.extend(ButtonCounterComponent);
      const instance = new ButtonCounter();
      instance.$mount("#insert-container");
    }
  }
}).$mount("#app");

однофайловое приложение

В реальных сценариях использования большинство из них встроено в проекты со скаффолдингом, а компоненты регистрируются однофайловым методом типа *.vue.

<template></template>
<script>
export default {
  data() {
    return {
      msg: "hello"
    }
  },
  created() {},
  mounted() {},
  destroy() {}
};
</script>
<style scoped></style>

import *.vue возвращает то, что есть в шаблонеscriptсерединаexportчасть.

Суммировать

На данный момент мы знаем об использовании и мерах предосторожности динамической регистрации глобальных компонентов и динамической регистрации локальных компонентов, мы можем выбрать различные схемы для сопоставления в соответствии с реальной ситуацией.

Категории