在vue中做js全局引用的组件

在vue中做出全局组件，js引用的那种

平常所使用的组件都是在组件内注册然后通过标签引用，或者全局注册，通过标签使用，这样模块化开发是极好的。但有时候我们不需要复杂的业务逻辑，只是要一个简单的提示弹窗，但是如果也像之前这样注册组件并在模板中添加标签来用的话，这样所有的组件都需要添加标签，而且在代码里面添加标签和原本的业务逻辑没啥关系，所以这里提供js调用的方式来使用简单的全局组件

写组件

全局js调用的组件和一般组件其实是一样的，只是挂载方式不同，所以关于组件的编写和普通的.vue文件一样编写就ok，值得注意的是，通常写组件需要注意复用，简单的设置之类的，比如说，提示的文字内容是否需要动态传输进来，提示的图标是否需要调用时设置，提示文字的颜色是否需要设置，这些设置需要组件提供相应的构造方法来设置,这里我使用一个简单的基础示例

<template>
  <div class="tips" v-if="tipsifshow">
    这里是提示
  div>
template>
<script>
export default {
  data() {
    return {
      tipsifshow: false,
    };
  },
  methods: {
    tipsif() {
      this.tipsifshow = true;
    },
  },
};
script>

写组件配套的安装js

// 引入组件
import Popup from './v-popup.vue'
// 创建个空对象
const obj = {}
// 设置安装方法
obj.install = (Vue) => {
  // 1. 创建组件构造器
  const ToastConstructor = Vue.extend(Popup)
  // 2. new 的方式，根据组件构造器，可以创建出来一个组件对象
  const popup = new ToastConstructor()
  // 3. 将组件对象手动挂载到某一个元素上挂载会替换元素内容,这里创建了一个div元素来作为被替换内容
  popup.$mount(document.createElement('div'))
  // 4. 将组件添加到dom中
  document.body.appendChild(popup.$el)
  // 设置调用方法
  Vue.prototype.$popup = popup
}
// 导出对象
export default obj

在入口文件main.js中将组件全局挂载到vue实例上

这里只需要导入js就好了，vue文件在js里面有引入的

// 导入组件安装方法
import tips from './components/tips/tips';
// 挂载
Vue.use(tips)

使用组件

注册好了之后就可以在js里面调用方法来使用组件了

  mounted() {
    // $tips是组件，$tips.tipsif()是组件上面的方法,
    // 通常方法需要传入参数，显示文字，回调还有类型之类的东西
    this.$tips.tipsif()
  },