Vue encapsulates single file popup window component

      VUE wants to realize a common pop-up window, which must be very simple for most front-end developers, but if you want to encapsulate a specific demand effect, it may be difficult for many students. It can be seen that the process from implementation to packaging is a test of personal ability!

      Ordinary pop-up windows are nothing more than creating a new pop-up window file reference registration, providing some data and adding some functions to write a pop-up window component for use on the page 

<template>
  <div>
    <messageBox v-if="show">弹出提示</messageBox>
    <button @click="show = true">显示</button>
  </div>
</template>
<script>
import messageBox from '../component/alert.vue';//引入组件
  export default {
    components: { messageBox },//注册
    data () {
      return {
        show: false
      }
    }
  }
  </script> 

       This kind of pop-up window is simple, but only one pop-up window is required. Is it really necessary to introduce registration in every place and do a lot of repetitive operations? Just like the native JS pop-up window can be done with just one alert(), how can it become more complicated in VUE, so if you want to encapsulate the pop-up window, you need to consider the ease of use of the code. Implementing a pop-up window can be very complicated. It doesn’t matter if you write more code when encapsulating. Anyway, the encapsulation is only written once, but! When using it, it must be simple, the simpler the better, because the number of times you use it is far greater than the number of times you package it, and once packaged it can be used countless times, so how to package it?

 The first thing to consider is that there is no need to make a specific component, just a common JS function can be realized

       Find the file directory and create a new folder utils Create a new tool function message.js Export a function showMsg The parameter is a custom message onClick is a specific callback function, which is executed after the OK button is clicked 

export function showMsg(msg,onClick){
}

If you want to use the pop-up window, you first need to render the pop-up window. The specific rendering logic is clearly written in the vue.js official document . We only need to change the corresponding content to what we need

 Create a root component and mount it to an element on the page

import root component 

export function showMsg(msg, onClick) {
  //在页面创建一个DIV元素
  const div = docutment.createElement('div')
  docutment.body.appendChild(div)
  //渲染组件到界面上
  const app = createApp(MessageBox,{
    //传递事件 传递消息 执行关闭弹窗
    msg,
    onClick(){
      onclick(()=>{
        //关闭弹窗即 移除div
        app.remove(div)
      })
    }
  });
  // 挂载div
  app.mount(div)
}

MessageBox is a mounted component

At this time, at first glance, isn't it just a new component that is just mounted to the page through a function call?

don't worry and look down

       A program must first satisfy high cohesion and low coupling So far, a bullet box actually uses two files, one js file and one vue file. Using two files for one function obviously violates high cohesion. The MessageBox here is nothing more than a component, so how to find a way to write the component file into the js file? This tests everyone's understanding of vue components, how to write code without a single file.

      In fact, it is not difficult. What is the essence of components? Obviously the essence of a component is an object! A configuration object, always remember that everything is an object. Breaking away from the single file, we can directly write this object into js, ​​so the render function needs to be used at this time. Render renders JSX . For details, you can go to the official document to find out.

Vue provides a  h() function for creating vnodes: h() it is  the abbreviation of hyperscript  -meaning "JavaScript that can generate HTML (Hypertext Markup Language)". The name comes from a convention that many virtual DOM implementations form by default. A more accurate name would be  createVnode(), but when you need to use the render function multiple times, a short name would be less labor intensive.

 It should be noted that the JSX syntax does not support the bearded syntax and needs to use the react style

const MessageBox = {
  props: {
    //组件配置例如函数参数等
    msg: {
      type: String,
      required: true
    }
  },
//ctx指上下文
  render(ctx) {
//通过上下文拿到属性和emit方法
   const { $props, $emit } = ctx;
     return  <div> <div>{$props.msg}</div> <button click="${emit('onClick')}">关闭</button> </div>
  }
};

 Regarding css styles, in addition to inline styles, you can also refer to react CSS in JS, just find a tool library that can write css in js!

all codes

const MessageBox = {
  props: {
    //组件配置例如函数参数等
    msg: {
      type: String,
      required: true
    }
  },
//ctx指上下文
  render(ctx) {
//通过上下文拿到属性和emit方法
   const { $props, $emit } = ctx;
     return  <div> <div>{$props.msg}</div> <button click="${emit('onClick')}">关闭</button> </div>
  }
};
export function showMsg(msg, onClick) {
  //在页面创建一个DIV元素
  const div = docutment.createElement('div')
  docutment.body.appendChild(div)
  //渲染组件到界面上
  const app = createApp(MessageBox,{
    //传递事件 传递消息 执行关闭弹窗
    msg,
    onClick(){
      onclick(()=>{
        //关闭弹窗即 移除div
        app.remove(div)
      })
    }
  });
  // 挂载div
  app.mount(div)
}

       So far, a js file has realized the function of encapsulating the vue pop-up window. You can use this pop-up window anywhere, not only in components, but you can even call this method in js, such as sending a request to realize the pop-up window.

       The currently implemented functions are relatively simple, but the overall ideological logic and basic framework of the overall implementation are already in place, and you can use them yourself to add more complete functions.