VueJS 单文件组件更新数据

Posted 2023-02-22

【中文标题】VueJS 单文件组件更新数据

【英文标题】：VueJS Single File Component updating data

【发布时间】：2018-08-02 18:29:10

【问题描述】：

我真的对数据在 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 单个文件组件中访问/处理数据后，我有点卡住了。

【问题讨论】：

您所描述的是一个store，它保存数据并且可以在整个应用程序中引用。不要害怕vuex在这里

【参考方案1】：

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

链接

Component Props

Events

Vuex Example

【参考方案2】：

如果你希望你的数据属性被多个组件共享，你可以使用 mixins。

Mixins 是一种为 Vue 组件分配可重用功能的灵活方式。 mixin 对象可以包含任何组件选项。当组件使用 mixin 时，mixin 中的所有选项都会“混合”到组件自己的选项中。

https://vuejs.org/v2/guide/mixins.html