Vue.extend программно вставляет компоненты

Vue.js

предисловие

В повседневной жизни всплывающий компонент нужно сначала зарегистрировать глобально или локально через Vue.component, а затем использовать в шаблоне. Далее мы пытаемся использовать компоненты программно.

выполнить

На самом деле шаги очень простые

  1. Создайте конструктор с помощью Vue.extend()
  2. Монтируется на целевой элемент через Vue.$mount()
  3. Цель состоит в том, чтобы реализовать всплывающее окно с предупреждением, а функции подтверждения и отмены показаны ниже.

document.createElement

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

Vue.extend()

Первым делом определимся со структурой и стилем этого всплывающего окна, то есть нормально напишем компоненты.

<template>
  <div class="grid">
      <h1 class="head">这里是标题</h1>
      <div @click="close">{{ cancelText }}</div>
      <div @click="onSureClick">{{ sureText }}</div>
  </div>
</template>
<script>
export default {
  props:{
    close:{
      type:Function,
      default:()=>{}
    },
    cancelText:{
      type:String,
      default:'取消'
    },
    sureText:{
      type:String,
      default:'确定'
    }
  },
  methods:{
    onSureClick(){
      // 其他逻辑
      this.close()
    }
  }
};
</script>

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

export function extendComponents(component,callback){
  const Action = Vue.extend(component)
  const div = document.createElement('div')
  document.body.appendChild(div)
  const ele = new Action({
    propsData:{
      cancelText:'cancel',
      sureText:'sure',
      close:()=>{
        ele.$el.remove()
        callback&&callback()
      }
    }
  }).$mount(div)
}

В приведенном выше коде следует отметить следующие моменты:

  1. Vue.extend gets — это конструктор, который может генерировать экземпляр Vue путем создания экземпляра.
  2. Вы можете передать параметры этому экземпляру при создании экземпляра, но需要注意Значение реквизита необходимо передать через свойство propsData.
  3. После получения экземпляра Vue нам нужно смонтировать его через целевой элемент, кто-то сначала подумает о монтировании к#app, процесс этого монтирования заключается в目标元素的内容全部替换, поэтому после подключения к#app, все дочерние элементы этого элемента исчезнут и будут заменены
  4. Для пункта 3 мы создаем элемент div и вставляем его в тело, и заменяем контент, который хотим подключить к этому div

Разница между компонентами Vue.extend и Vue.component

  1. Оба компонента Vue.component должны сначала зарегистрировать компонент, а затем использовать зарегистрированное имя тега в шаблоне, чтобы реализовать использование компонента. Vue.extend написан программно
  2. Что касается отображения компонента, вам необходимо передать состояние в родительский компонент для управления или использовать v-if/v-show вне компонента для достижения контроля, а также отображается ли Vue.extend или нет.手动делать компоненты挂载和销毁.
  3. Компонент Vue.component является более гибким, когда ему нужно использовать настраиваемый пользовательский интерфейс, такой как слот в компоненте, в то время как Vue.extend более ограничен, поскольку не использует шаблон и слот, пользовательский интерфейс управляется реквизитами.
Категории