vue方式实现js方式自定义全局组件

vue方式实现js方式自定义全局组件
自定义组件的方式在vue中有render函数形式纯js方式的，还有使用template创建html格式的，但是template格式的也分为纯靠html引入的，这种的无法在js文件中调用，如果我们要在js文件中调用公共组件，你也不想使用render函数形式的话，可以看看下面的这种方式。
代码已经在下面咯，如果同志们等不及可以直接看代码哦。首先我们要了解vue的Vue.extend这个api

Vue.extend( options )
  参数：{Object} options
  用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象；
  	   data 选项是特例，需要注意： 在 Vue.extend() 中它必须是函数；

了解完我们就要开始打地基咯，首先我们要自己写好我们的自定义组件，然后在创建一个js文件引入我们的自定义组件和vue，如下

//注意，这里的前提是我们已经写好了自己的自定义组件
import Vue from 'vue'
import myToast from "@/components/toast.vue"//引入自定义组件

接下来我们需要利用Vue.extend()这个api来创建一个vue的子类，传入的参数是我们的组件实例，然后我们需要实例化一下生成一个实例,可能这个时候就有同志要问了，已经引入组件了为什么还要实例化一下呢，ok，满足一下

const MsgConstructor = Vue.extend(myToast);
const mytoast = new MsgConstructor();
console.log("myToast--111-->",myToast)
console.log("mytoast---222->",mytoast)
console.log("MsgConstructor----33-->",MsgConstructor)

大家可以看到，vue构造器创建了子类，子类是一个vue的构造函数，我们用这个构造函数创建的组件实例继承了vue的所有方法，这样就方便我们之后使用mount()手动将组件实例挂载到vue上，OK，我们现在要来创建一个js文件如下

//这里是和自定义组件组合的js文件
import Vue from 'vue'
import myToast from "@/components/toast.vue"//引入自定义组件

// vue 构造器
const MsgConstructor = Vue.extend(myToast);
const mytoast = new MsgConstructor();
const Toastclass = {
//我们可以调用这个方法传我们需要的参数，改变组件里的数据，
//你们可以打印一下组件实例，找到你们需要改变的值
	showModal:(option={})=>{
	//--------------
		mytoast.$props.type = option.type;
		mytoast.$props.title = option.title;
		mytoast.$props.content = option.content;
		mytoast.$props.ispopup = true;
		mytoast.close_fn = option.cancel;
		mytoast.sure_fn = option.success;
	//--------------这快区域是我用来操作数据的，你们记得换成你们自己的代码
		//这里很重要，我们需要将组件挂载到vue
		mytoast.$mount()
		//然后将我们的组件添加到body
		document.body.appendChild(mytoast.$el) 
	},
	close:()=>{
		mytoast.$props.ispopup = false;
		//最后我们关闭的话要记得移除
		document.body.removeChild(mytoast.$el)
	}
	
}
export default Toastclass;

我们要在哪个页面使用就可以引入到哪个页面，如果不想每个页面引入也可以直接在main.js挂载到vue的原型上，此处不演示，

//在使用的vue页面引入我们上面写的js文件
	import Toastclass from "@/components/toast.js"；
	//使用
	Toastclass.showModal({
				type:3,
				title: '更新提示',
				content: '新版本已经准备好，是否重启应用？',
				success:()=>{
					console.log("我是确认");
					Toastclass.close();
				},
				cancel:()=>{
					console.log("我是取消")
					Toastclass.close();
				}
				})

大家注意上面使用都是我自己在js文件定义的方法，你们改成自己，只要能在js文件中拿到组件实例，其实就迎刃而解了，我这里就是在我原本的组件模版里定义了close_fn和sure_fn方法，然后在js文件中重新赋值了，各位不要复制代码哈，我的代码只是我的业务代码，我讲的是步骤。