preface

The usual way to use a popbox component is to register it globally or locally with Vue.com Component and then use it in a template. Next we try to programmatically use components.

implementation

The steps are simple

  1. Create the constructor with vue.extend ()
  2. Mount to the target element via Vue.$mount()
  3. The goal is to realize an Alert pop-up box, and the confirmation and cancellation functions are shown below

document.createElement

To insert an element, you can use document.createElement. You don’t have to do the above two steps, but the complexity, styling, and maintainability of the component make creating a constructor more feasible.

Vue.extend()

First to define the structure and style of this popbox, is the normal write component can be

<template>
  <div class="grid">
      <h1 class="head"> here is the title </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:'cancel'
    },
    sureText:{
      type:String,
      default:'sure'
    }
  },
  methods:{
    onSureClick(){this.close()}}}; </script>Copy the code

Detach the logic that creates the constructor and mounts it to the target element and reuse it in multiple places

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

Note the following points in the code above:

  1. The vue. extend obtain is a constructor that can be instantiated to generate a Vue instance
  2. You can pass parameters to this instance when you instantiate, butNeed to pay attention toThe props value needs to be passed through the propsData property
  3. Once we have a Vue instance, we need to mount it from a target element, and one of the first things that comes to mind is mount to#appOn, the mount process will beReplace all contents of the target element, so once mounted to#appAll children of the element disappear and are replaced
  4. For point 3, we create a div element to insert into the body, and we replace it with what we want to mount

Vue.extend and Vue.com Ponent Component differences

  1. Vue.com Component both require component registration and then use the registered tag name in the template to use the component. Vue.extend is written programmatically
  2. Whether the component is displayed or not is controlled by passing a state in the parent component or by using v-if/ V-show outside the component, while vue.extend is displayed or notmanualTo make componentsMount and destroy.
  3. Vue.com Component is more flexible when using custom UIs such as slots in components, while vuue. Extend is more limited because it uses props to control the UI without templates or slots.