方式一：在 main.js 中定义实现

1. 在 main.js 中定义

import Vue from "vue";
import App from "./App.vue";

// 全局组件
Vue.component("ComponentA", {
  template: "<div><div>{{ msg }}</div></div>",
  data() {
    return {
      msg: "我是组件 ComponentA",
    };
  },
});

// 全局过滤
Vue.filter("filterA", (v) => {
  return v + "_filterA";
});

// 全局指令
Vue.directive("focusA", {
  inserted: function (el) {
    el.focus();
  },
});

// 全局混入
Vue.mixin({
  data() {
    return {
      mixinA: "mixin_A",
    };
  },
  methods: {
    playMixinAA() {
      return "mixin_AA";
    },
  },
});

// 全局属性和方法
Vue.prototype.A = "A";
Vue.prototype.playAA = () => {
  return "AA";
};

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

2. 在组件中使用

<template>
  <div class="home">
    <h1>五、全局属性、方法、过滤器、组件</h1>
    <div>1. 全局组件</div>
    <ComponentA></ComponentA>
    <div>2. 全局过滤</div>
    <div>{{ f1 | filterA }}</div>
    <div>3. 全局指令</div>
    <div><input v-focusA type="text" /></div>
    <div>4. 全局混入</div>
    <div>{{ mixinA }}</div>
    <div>{{ playMixinAA() }}</div>
    <div>5. 全局属性和方法</div>
    <div>{{ A }}</div>
    <div>{{ playAA() }}</div>
  </div>
</template>

<script>
export default {
  name: "GlobalView",
  data() {
    return {
      f1: "f1",
      f2: "f2",
    };
  },
};
</script>

方式二：通过 vue 注册插件的方式实现

1. 在 main.js 中通过 Vue.use(install函数) 注册插件

import globals from "@/utils/global/index";
Vue.use(globals);

2. 在 src\utils\global\index.js 中集中整合

import components from "@/utils/global/component.js";
import filters from "@/utils/global/filter.js";
import directives from "@/utils/global/directive.js";
import mixins from "@/utils/global/mixin.js";

const globals = {
  install: function (Vue, option) {
    console.log("option", option);

    // 全局组件
    Object.keys(components).forEach((key) => {
      Vue.component(key, components[key]);
    });

    // 全局过滤
    Object.keys(filters).forEach((key) => {
      Vue.filter(key, filters[key]);
    });

    // 全局指令
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key]);
    });

    // 全局混入
    Object.keys(mixins).forEach((key) => {
      Vue.mixin(mixins[key]);
    });

    // 全局属性和方法
    Vue.prototype.B = "B";
    Vue.prototype.playBB = () => {
      return "BB";
    };
  },
};

export default globals;

3. 分别定义全局组件、全局过滤、全局指令、全局混入

1. 定义全局组件 src\utils\global\component.js

// 全局组件
import ComponentB from "@/components/ComponentB.vue";
export default {
  ComponentB,
};

2. 定义全局过滤 src\utils\global\filter.js

// 全局过滤
const filterB = (v) => {
  return v + "_filterB";
};

export default {
  filterB,
};

3. 定义全局指令 src\utils\global\directive.js

// 全局指令
const directiveB = {
  inserted: function (el) {
    el.innerHTML = "directiveB change innerHTML";
  },
};

export default {
  directiveB,
};

4. 定义全局混入 src\utils\global\mixin.js

// 全局混入
const mixinB = {
  data() {
    return {
      mixinB: "mixin_B",
    };
  },
  methods: {
    playMixinBB() {
      return "mixin_BB";
    },
  },
};

export default {
  mixinB,
};

4. 在组件中使用

<template>
  <div class="home">
    <h1>五、全局属性、方法、过滤器、组件</h1>
    <div>1. 全局组件</div>
    <ComponentB></ComponentB>
    <div>2. 全局过滤</div>
    <div>{{ f2 | filterB }}</div>
    <div>3. 全局指令</div>
    <div v-directiveB>{{ f1 }}</div>
    <div>4. 全局混入</div>
    <div>{{ mixinB }}</div>
    <div>{{ playMixinBB() }}</div>
    <div>5. 全局属性和方法</div>
    <div>{{ B }}</div>
    <div>{{ playBB() }}</div>
  </div>
</template>

<script>
export default {
  name: "GlobalView",
  data() {
    return {
      f1: "f1",
      f2: "f2",
    };
  },
};
</script>