VUE 声明一些公共变量并引入

在 Vue 中声明公共变量可以通过 Vue 实例的 data 属性来实现，然后在组件中通过 this.$data 访问这些公共变量。另外，可以使用 Vue 的 mixin 机制来将一些公共的逻辑和方法混入到组件中。具体实现方式如下：

1. 在 Vue 实例的 data 属性中声明公共变量，例如：

var app = new Vue({
  data: {
    globalVar: 'global variable'
  }
});

2. 创建一个 mixin 对象，包含公共的逻辑和方法，例如：

var myMixin = {
  created: function () {
    console.log('mixin created');
  },
  methods: {
    hello: function () {
      console.log('hello from mixin');
    }
  }
};

3. 在组件中引入 mixin 对象，例如：

Vue.component('my-component', {
  mixins: [myMixin],
  data: function () {
    return {
      localVar: 'local variable'
    };
  },
  created: function () {
    console.log('component created');
  },
  methods: {
    greet: function () {
      console.log('greet from component');
    }
  }
});

在上面的代码中，my-component 组件引入了 myMixin 对象，并且在 created 钩子函数中会输出组件创建和 mixin 创建的信息。同时，组件中也声明了一个局部变量 localVar，并且实现了一个 greet 方法。此时，我们可以在组件的方法中访问到公共的方法 hello 和公共变量 globalVar。例如：

var vm = new Vue({
  el: '#app',
  methods: {
    handleClick: function () {
      console.log(this.$data.localVar); // 输出 'local variable'
      console.log(this.$data.globalVar); // 输出 'global variable'
      this.hello(); // 输出 'hello from mixin'
      this.greet(); // 输出 'greet from component'
    }
  }
});