使用Vue.extend构造函数实现所有页面都有吐槽吧的弹窗按钮

Vue.extend的作用（属于编程式插入组件）

1，通过Vue.extend()创建构造器
2，通过Vue.$mount()挂载到目标元素上

Vue.extend使用注意事项

1，通过Vue.extend获取的是一个构造函数，通过实例化生成一个Vue实例
2，实例化时可以向这个实例传递参数，注意的是props的值需要通过propsData属性来传递
3，得到Vue实例后，我们需要一个目标元素来挂载它，注意：这个挂载的过程是将目标元素的内容全部替换（有人首先会想到挂载到 #app 上，这个挂载的过程是将目标元素的内容全部替换，所以一旦挂载到 #app 上，该元素的所有子元素都会消失被替换）

Vue.extend和Vue.component component的区别

1,2者都需要先进行组件注册 Vue.extend(component) Vue.component(component)
2,关于组件显示与否，Vue.component需要父组件传入一个状态来控制（is）或者在组件外部使用v-if/v-show来实现控制
而Vue.extend的显示与否是手动的去做组件的挂载与销毁（destroy）
3,Vue.component中可以使用slot等自定义UI更灵活，但是Vue.extend由于没有template的使用，没有slot都是通过props来控制ui的
更加局限一些

举个例子

尝试使用编程式的组件写法实现一个alert弹窗，确认和取消功能如下

image.png

1.首先正常写一个弹窗的组件

<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>

2,将创建构造器和挂载到目标元素的逻辑抽离出来，多处可以复用

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)
}

项目中的使用

由于我们的项目中每个页面都有一个吐槽吧的点击弹窗功能，在每一个页面中都引入组件比较麻烦，就想到使用Vue.extend
1，准备挂载元素
在app的下面创建一个元素，和app同级

image.png

2，吐槽弹窗组件（advise.vue）
正常的组件即可，代码省略
3,创建实例，挂载元素
直接在main.js 文件中挂载（没有单独抽离封装）

new Vue({
  router,
  el: '#app'
})
const Advise = Vue.extend(advise)
new Advise().$mount('#advise-app')