详解Vue 全局变量，局部变量

在Vue应用中，有时需要在各个组件之间共享全局的数据，同时也需要在某些组件内部使用局部的数据，这就需要用到Vue的全局变量和局部变量了。

全局变量

全局变量是指可以在任何Vue组件中使用的变量。要定义全局变量，我们需要在Vue实例中定义一个全局对象，然后在这个对象上添加变量。

// 定义全局对象
Vue.prototype.$global = {};

// 在全局对象上添加变量
Vue.prototype.$global.username = 'Admin';

上面的代码中，我们定义了一个名为$global的全局对象，并在其上添加了一个username属性。在任何Vue组件内部，我们都可以通过this.$global.username来访问这个全局变量。

示例：

<template>
  <div>
    <p>用户名：{{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    username() {
      return this.$global.username;
    },
  },
};
</script>

在上面的示例中，我们使用了computed属性来计算用户名username，并返回全局变量$global.username。在模板中，我们可以直接显示这个username变量。

局部变量

局部变量是指只能在当前Vue组件中使用的变量。要定义局部变量，我们可以直接在组件的data选项中定义变量。

示例：

<template>
  <div>
    <p>用户角色：{{ role }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      role: 'guest',
    };
  },
};
</script>

在上面的示例中，我们在组件的data选项中定义了一个名为role的局部变量，并设置其默认值为guest。在模板中，我们可以直接使用role变量。

总结

全局变量和局部变量都是非常常见的Vue开发中的概念，理解它们的定义和用法对于编写高质量和可维护的Vue应用非常重要。