Question

我真的很困惑数据如何在VueJS的单个文件组件中工作。在文件中，比如说test.vue，据我所知，你会写出类似这样的脚本：

export default {
  name: 'Testapp',
  data () {
    return {
      msg: 'sample message'
    }
  }
}

然后在其他地方，比如在一个名为vuescript.js的文件中，我会输入类似下面的内容并从html文件中调用它：

从'vue'导入Vue 从'./test.vue'

导入VApp

var vueApp = new Vue({
  el: '#app',
  render: h => h(VApp)
})

现在我如何访问该模板对象的数据？我想要的是在其他地方使用从服务器获取数据的代码，并且可以在多个组件之间共享，因此我将拥有一部分数据，这些数据在单个存储库中是通用的，并且我也是能够将非共享数据驻留在组件中，用于某些事情，如设置和其他元数据。

BLUF：在查看Vue单个文件组件中如何访问/处理数据之后，我有点陷入困境。

Answer 1

组件内部的数据只能通过两种方式在自身之外访问。事件将数据向上传播到父级，然后父级可以决定是否需要将其作为prop传递给另一个组件。或者它存储在Vuex中并通过getter和mutation进行访问。

Answer 2

如果您希望数据属性由多个组件共享，则可以使用mixins。

Mixin是分配Vue组件可重用功能的灵活方法。 mixin对象可以包含任何组件选项。当组件使用混入时，混入中的所有选项都将被“混入”到组件自己的选项中。