前言
写_Vue.js_已经3年了吧,对_Vue.extend_全局方法的了解也就一直停留在了解,也一直抱着不用就不学的思想,造成了一次又一次的错过~~~
直到最近,才通过公司10年秃头少年的代码,才知道错过_Vue.extend_方法,也就等于错过了对_Vue_组件第二春了解的机会!!!
需求分析
在页面中弹出消息提示框,比如在用户点击页面某个按钮给予回应,弹个提示
这种业务场景很常见吧,肯定是先创建一个弹框组件,在需要使用弹框的地方注册组件并挂载到页面上去
但是需求还没结束,又提出在所以页面都可以弹出这个消息提示框
首选局部注册肯定是不行了,局部注册只能当前页面使用,所以要选择在_App.vue_中注册并挂载,因为_App.vue_是所有组件的根组件,所以组件也都能访问到_App.vue_中的方法,我们只需要在_App.vue_暴露一个弹框显示的方法就可以了
产品还不打算放过我,又提出需求是可以同时出现多个消息提示框
这个就不好实现了呀,一个组件挂载只能弹出一个提示框,总不能在_App.vue_挂载很多个吧,其实这也是解决方案,但是不利于扩展、占用内存!!!
那就没有办法了吗?也不是,那就要请出主角_Vue.extend_全局方法!!!
Vue.extend
看看官方的八股文:
使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象
我认为这段文字表达十分明了,首先_Vue.extend_参数是_包含组件选项的对象_,返回值是_Vue_的子类
import Vue from 'vue'
let VueComponent = Vue.extend({})
VueComponent.prototype.__proto__ == Vue.prototype // true
我们这里将_子类_称为_VueComponent_
你对这个名称很熟悉吧~~~
import Vue from 'vue/dist/vue.esm.js' // 必须引入这个版本的Vue才可以使用template选项
new Vue({el: "#app",template: `<App></App>`,