Vue.prototype 的基本概念
Vue.prototype 是 Vue 实例的原型对象。在 JavaScript 中，每个构造函数都有一个 prototype 属性，这个属性是一个指向原型对象的指针。原型对象包含可以由特定类型的所有实例共享的属性和方法。在 Vue 中，通过修改 Vue.prototype，我们可以为所有的 Vue 实例添加全局的属性和方法。
使用 Vue.prototype 添加全局属性和方法
添加全局属性
你可以通过 Vue.prototype 添加任何类型的全局属性，比如字符串、数字、对象等。这些属性在所有 Vue 组件的实例中都可以通过 this 关键字来访问。
// 在 main.js 或其他入口文件中 Vue.prototype.$appName = 'My App';
然后，在任何 Vue 组件中，你都可以使用 this.$appName 来访问这个全局属性。
添加全局方法
同样地，你可以通过 Vue.prototype 添加全局方法。这些方法可以在任何 Vue 组件中通过 this 调用。
// 在 main.js 或其他入口文件中 Vue.prototype.$sayHello = function(name) { console.log(`Hello, ${name}!`); };
在组件中，你可以这样使用这个方法：
export default { mounted() { this.$sayHello('Vue.js'); } }
使用场景
组件间共享逻辑：有时，一些逻辑需要在多个组件中使用。通过在 Vue.prototype 上定义方法，可以避免在每个组件中重复编写相同的逻辑，提高了代码的可维护性和可读性。
全局函数：当需要在整个应用程序中执行某些通用的任务时，可以在 Vue.prototype 上定义方法。这样，你可以在任何需要的地方调用这些方法，而无需为每个 Vue 实例创建单独的函数。
插件机制：通过在 Vue.prototype 上定义方法，可以创建插件系统。插件可以定义自己的方法，并在需要时被其他 Vue 实例使用。
注意事项
避免命名冲突：通常，全局变量和方法的名字以 $ 开头，这是 Vue 的一个约定，以避免与组件的 data、props、computed 等属性产生冲突。
避免污染全局原型：在定义方法时，应确保只在当前文件或模块范围内共享这些方法，以避免污染全局原型。过多的全局方法可能会导致代码难以理解和维护。
在模板中使用全局变量和方法
方法1
在 Vue 的模板中，你可以直接使用通过 Vue.prototype 添加的全局变量和方法。由于它们被添加到了 Vue 的原型链上，所以每个 Vue 实例都可以访问它们。
<template> <div> <p>{{ $appName }}</p> <button @click="$sayHello('World')">Click Me</button> </div> </template>
在上面的模板中，$appName 是通过 Vue.prototype 添加的全局属性，而 $sayHello 是全局方法。它们都可以直接在模板中使用。
方法2
以下是如何使用 Vue.prototype 来添加一个全局变量的示例：
// 在你的主入口文件（比如 main.js）中 import Vue from 'vue'; import App from './App.vue'; // 定义全局变量 Vue.prototype.$globalTcType = '初始值'; // 或者，如果你有一个对象并且想要暴露它的方法 const globalTcType = { $tcType: '初始值', get() { return this.$tcType; }, set(value) { this.$tcType = value; console.log(111111111, value); } }; // 将全局对象添加到 Vue.prototype 上 Vue.prototype.$globalTcType = globalTcType; // 创建和挂载根实例 new Vue({ render: h => h(App), }).$mount('#app');
在上面的代码中，我们定义了一个名为 $globalTcType 的全局变量，并将其添加到 Vue.prototype 上。这意味着在 Vue 的任何组件中，你都可以通过 this.$globalTcType 来访问这个全局变量。
现在，在 Vue 组件模板中可以这样使用：
<template> <div> <!-- 假设你有一个方法来获取 globalTcType 的值 --> <p>{{ getGlobalTcTypeValue() }}</p> <!-- 或者如果你只是想要显示它的值 --> <p>{{ $globalTcType.$tcType }}</p> </div> </template> <script> export default { methods: { getGlobalTcTypeValue() { return this.$globalTcType.get(); // 调用全局对象的 getter 方法 } } } </script>
在上面的模板中，$globalTcType 是通过 Vue.prototype 添加的全局变量。你可以在模板中直接使用它，或者通过组件的方法间接使用它。
请注意，使用 Vue.prototype 添加全局变量时，变量名最好以 $ 开头，以便与组件的 data、props、computed 等属性区分开来，避免潜在的命名冲突。
同时，请确保不要在全局变量上添加任何可能会与 Vue 实例的内置属性或方法相冲突的名称。这样可以避免任何潜在的错误或混淆。
方法3
在 Vue 的模板中，你可以直接访问在 Vue 实例或组件的 data、computed 或 methods 中定义的属性或方法。然而，由于 globalTcType 在你提供的代码片段中似乎是一个对象，包含 get 和 set 方法，它并不是一个简单的数据属性。因此，你不能直接在模板中通过 {{ globalTcType }} 来获取它的值，因为模板不会识别这种形式的 getter。
可以通过几种方式来解决这个问题：
在 data 中定义一个响应式属性来存储 globalTcType 的值：
你可以在 Vue 组件的 data 函数中定义一个属性，然后在 created 或 mounted 钩子中使用 globalTcType 的 get 方法来初始化它。之后，你可以在模板中直接访问这个属性。
export default { data() { return { tcTypeValue: null // 初始化这个属性来存储 globalTcType 的值 }; }, created() { this.tcTypeValue = this.globalTcType; // 使用 getter 获取值 }, computed: { // 定义一个计算属性来访问 globalTcType 的值 globalTcType: { get() { return this.$tcType; // 假设 $tcType 是在某个地方定义的全局变量 }, set(value) { this.$tcType = value; console.log(111111111, value); } } } };
在模板中：
<template> <div>{{ tcTypeValue }}</div> </template>
使用计算属性来访问 globalTcType 的值：
你可以定义一个计算属性，该属性使用 globalTcType 的 get 方法来获取值。这样，每当 globalTcType 的值变化时，计算属性也会自动更新。
computed: { tcTypeComputed() { return this.globalTcType; // 这里假设 globalTcType 的 get 方法会返回正确的值 } }
在模板中：
<template> <div>{{ tcTypeComputed }}</div> </template>
直接在模板中使用方法调用：
虽然这不是一个推荐的做法，因为方法调用在模板中可能会导致不必要的性能开销，但你可以通过定义一个方法来返回 globalTcType 的值，并在模板中调用这个方法。
methods: { getTcTypeValue() { return this.globalTcType; // 调用 getter 方法 } }
在模板中：
<template> <div>{{ getTcTypeValue() }}</div> </template>
请注意，this.$tcType 看起来像是在某个地方定义的全局变量或组件实例的一个属性。确保 this.$tcType 在你的组件的上下文中是可用的，否则你需要检查它的定义和来源。如果 $tcType 是在 Vuex store 或其他全局状态管理系统中定义的，你可能需要使用不同的方式来访问它。
您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。
