vue在页面使用Vue.prototype全局变量

---

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 或其他全局状态管理系统中定义的，你可能需要使用不同的方式来访问它。

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。