如何从脚本访问 Vue 组件的数据答案

【问题标题】：How to access a Vue component's data from a script如何从脚本访问 Vue 组件的数据
【发布时间】：2022-01-22 01:29:56
【问题描述】：

这里是页面的简化 html 和 javascript 文件。它有一个按钮和一个组件，它是一个显示组件数据的文本。我希望在单击按钮时更改组件的数据。但是如何通过脚本访问组件的数据？

index.html

<body>
  
  <div id="app">
    <my-component></my-component>
    <button id="btn"> change data </button>
  </div>  
  
  <script src="https://unpkg.com/vue@next"></script>
  <script src="./main.js"></script>

</body>

main.js


let app = Vue.createApp({});
app.component('my-component', {
    data: function() {
      return {
        component_data : "foo"
      }
    },
    template: '<p> data = {{ component_data }} </p>'
  }
);
app.mount("#app");

document.querySelector("btn").onclick = function() {
  // HOW TO CHANGE component_data TO "bar"
}

【问题讨论】：

你可以使用 props 或 ref。你知道如何使用 refs 和 props 吗？
是的，但我只想从外部访问组件的数据。
这表示 XY 问题。通常，您不应该在设计良好的应用程序中这样做。如果您有特定的问题要解决，请考虑对其进行解释，而不是采用可能错误的解决方法。

标签： vue.js vue-component

【解决方案1】：

要获取外部组件的引用，您可以使用template refs

这是上述问题中提供的代码的重构，用于从脚本中访问组件数据。

<div id="app">
  <my-component ref="my_component"></my-component>
  <button @click="onBtnClick()"> change data </button>
</div>

let app = Vue.createApp({
  methods: {
    onBtnClick() {
      this.$refs.my_component.component_data = "bar";
    }
  }
});

【讨论】：

这个解决方案当然有效，但请记住，它是在组件之间创建父/子关系。如果这适合您的应用程序架构，则 100% 没问题。但是，如果单独的、不相关的组件需要访问公共数据，那么像 Vuex 这样的东西将允许组件保持松散耦合

【解决方案2】：

您可以使用组件道具更改组件之间的数据。

index.html

<body>
  
  <div id="app">
    <my-component :component-data="text"></my-component>
    <button @click="handleBtnClick"> change data </button>
  </div>  
  
  <script src="https://unpkg.com/vue@next"></script>
  <script src="./main.js"></script>

</body>

main.js 文件

let app = Vue.createApp({
    data() {
        return { text: 'foo' }
    },
    methods: {
        handleBtnClick() {
            this.text = 'bar';
        }
    }
});
app.component('my-component', {
    props: {
        componentData: {
            type: String,
            default: 'foo'
        }
    }
    template: '<p> data = {{ componentData }} </p>'
  }
);
app.mount("#app");

我认为你是 Vuejs 的新手。你必须先阅读 Vue 文档

【讨论】：

感谢您的回答，但我想从外部访问组件的数据。我喜欢这样做的方法，这是我自己的答案stackoverflow.com/a/70422448/17541440

【解决方案3】：

一种可能性是将按钮合并到组件模板中的 HTML 中。如果这对您的应用程序可行，那么您可以向组件添加一个函数并将该函数绑定到按钮的单击事件。

例如（注意这是未经测试的，所以可能有错别字）

app.component('my-component', {
    data: function() {
      return {
        component_data : "foo"
      }
    },
    methods: {
        changeData() {
           this.component_data = "The data changed";
        }
    },
    template: `<p> data = {{ component_data }} </p>
<button @click="changeData">Change data</button>`
  }
);

如果按钮无法合并到 my-component 中，那么我建议使用 Vuex 数据存储。 Vuex 是一个反应式数据存储，可以在整个应用程序中访问。

【讨论】：

感谢您的回答，但按钮不是组件的一部分，我想从组件外部访问数据（例如问题示例中的按钮时）。