vue实现跨页面引用js方法并获取数据的值

Vue可以通过创建一个全局的混入（mixin）来实现跨页面引用js方法，并获取数据的值。

首先，在你的Vue项目中创建一个名为globalMixin.js的文件，并在其中定义一个全局混入对象。这个混入对象可以包含你想要在多个页面中共享的方法和数据。

// globalMixin.js
const globalMixin = {
  methods: {
    // 定义你想要共享的方法
    hello() {
      console.log('Hello from global mixin!')
    }
  },
  data() {
    return {
      // 定义你想要共享的数据
      sharedData: 'This is shared data'
    }
  }
}

export default globalMixin

然后，在你的Vue项目中的入口文件（如main.js）中引入并使用这个全局混入对象：

// main.js
import Vue from 'vue'
import App from './App.vue'
import globalMixin from './globalMixin'

Vue.mixin(globalMixin)

new Vue({
  render: h => h(App),
}).$mount('#app')

现在，在你的任何Vue组件中，都可以直接使用全局混入中定义的方法和数据。例如，在一个名为Page1.vue的组件中，你可以这样调用全局混入中定义的方法并获取数据的值：

// Page1.vue
export default {
  mounted() {
    this.hello() // 调用全局混入中的方法
    console.log(this.sharedData) // 获取全局混入中的数据
  }
}

同理，在其他页面的组件中也可以使用全局混入中定义的方法和数据。

注意：全局混入可能会导致命名冲突和代码维护困难。在使用全局混入时，请确保方法和数据的命名是唯一的，并且仅在必要的情况下使用全局混入