vue3.x插件体系

image.png

import * as http from '@/5_http.js'
export default {
  install(app, options) {
    // app,是createApp(App)根对象,options是参数
    console.log(app, options);
    // 全局插件事件
    app.config.globalProperties.$http = http;
    // 全局指令
    app.directive('auth', (el, binding) => {
      console.log('binding...', el, binding)
      let auths = ['edit', 'delete'];
      let ret = auths.includes(binding.value);
      if (!ret) {
        el.style.display = 'none';
      }
    });
    //全局组件
    app.component('my-head', {
      template: `<div>hello myhead</div>`
    })
  }
}

使用方式

<template>
  <div>
    <h2>插件</h2>
    <button @click=" $http.get() " v-auth="'edit'">编辑</button>
    <my-head></my-head>
  </div>
</template>

异步组件

import { defineAsyncComponent } from 'vue'
export default {
  data() {
    return {
      nowCom: 'my-com1'
    }
  },
  components: {
    'my-com1': defineAsyncComponent(() => import('@/13_MyCom1.vue')),
    'my-com2': defineAsyncComponent(() => import('@/14_MyCom2.vue')),
    'my-com3': defineAsyncComponent(() => import('@/15_MyCom3.vue'))
  }
}