怎么将组件直接绑定到vue实例上面？

在实际开发过程中，有多种使用vue组件的方式，有在组件中引入，直接挂载到vue进行全局使用，也有直接挂载到vue实例上面当成vue的一个属性来使用的。下面通过代码来实现将组件直接绑定到vue实例。

第一步写个vue组件叫demo

<template><view><view v-if="showFlag" @touchmove.stop.prevent @mousewheel.stop.prevent class="u-demo"><view class='demo'><view><image src="../../static/images/demo.png" class="esuc" aria-hidden="true"></image></view><view class="content">{{ content }}</view></view></view></view>
</template><script>export default {name: 'demo',data() {return {showFlag: false,content: '弹出框里面的内容',showCancel: false}},}
</script><style scoped>.u-demo {position: fixed;z-index: 999;background:rgba(0,0,0,.6);height:2000px;width:100%;top:0;left:0;right:0;bottom:0;overflow:hidden;}.demo {position:fixed;width:260rpx;height:172rpx;background:rgba(0,0,0,.7);color:#fff;font-size:30rpx;text-align:center;padding-top:44rpx;padding-bottom:44rpx;top:520rpx;bottom:0;left:0;right:0;z-index:100;margin:0 auto;}.esuc {width:108rpx;height:108rpx;margin-bottom:20rpx;}
</style>

第二步，写个demo.js 文件，然后在这里把demo组件绑定到构造器上面

import Vue from 'vue'
// 弹窗页面
import uDemo from './demo.vue'
// 弹窗构造器js
const popDemo = Vue.extend(uDemo);
// 生成弹窗的方法
uDemo.install = function(data) {let instance = new popDemo({data}).$mount();document.body.appendChild(instance.$el); // 挂载Vue.next(()=>{// 首次打开显示弹窗instance.showFlag = truesetTimeout(function() {  // 1.5s后隐藏弹窗instance.showFlag = false},1500)})
}

第三步，在main.js 文件中将demo.js文件直接挂载到vue实例上面

import uDemo from '@/components/uDemo/demo.js'
Vue.prototype.$alert = uDemo.install