【Vue】指令调用的全局组件

发布于:2023-01-15 ⋅ 阅读:(549) ⋅ 点赞:(0)

一、需求

多个页面需要使用同一个组件,页面文件多的情况下使用import方式页面会导致重复代码过多,所以这里采用了全局组件的方法,并且可以通过全局指令调用,使用方式与element的message组件相同

二、代码实现

模仿element的message组件,定义一个全局的抽屉组件,完整的组件文件结构:
在这里插入图片描述
定义组件,和正常封装一个组件一样,只是这里我们不直接放到页面的vue文件使用(main.vue)

<template>
  <el-drawer
    direction="rtl"
    :visible.sync="drawer"
    title="我是标题">
    <span>我来啦!</span>
  </el-drawer>
</template>

<script>
  export default {
    data() {
      return {
        drawer: false
      }
    }
  };
</script>

将定义好的组件通过Vue实例化,并将添加到根节点(main.js)

import Vue from "vue"; // 导入vue
import Main from './main.vue'vue // 导入组件

// 将组件作为参数,使用vue提供的全局方法,创建一个构造函数
let DrawerConstructor = Vue.extend(Main)

let instance;

const Drawer = function (options = {}){

  // 初始化实例,此时instance是一个组件实例,但未初始化未完成
  instance = new DrawerConstructor({
    data: options
  });

  // 完成初始化
  instance.$mount();

  // 将组件添加到根节点body
  document.body.appendChild(instance.$el);
}
Drawer.open = function (){
  Drawer()
  instance.visible = true;
}

export default Drawer

在index.js文件下导出

import Drawer from './src/main.js'
export default Drawer

全局定义(项目main.js)

// 导入自定义全局组件
import Drawer from "./components/drawer/index.js";
Vue.prototype.$drawer = Drawer

三、组件使用

this.$drawer.open()

网站公告

今日签到

点亮在社区的每一天
去签到