在 vue 组件的下拉列表中使用来自一个组件的数据答案

【问题标题】：Using data from one component in dropdown list in vue component在 vue 组件的下拉列表中使用来自一个组件的数据
【发布时间】：2023-03-16 02:17:01
【问题描述】：

我有两个 vue 页面（使用 quasar）。我想将一个页面中的数组用作另一页面中的下拉列表。我认为它是作为道具传递的，但我无法弄清楚结构。它看起来不像一个真正的父子结构。数组作为计算函数计算。

如何在计算函数 optionsArray 中使用第 2 页计算的数组作为第 1 页中的“选项”？

Vue 页面 1

<template>
 <form >
  <q-select
    :options="options"
  />
  <q-btn label="Save" type="submit"  />
 </form>
</template>
<script>
  export default {
    name: "AddEntry",
    props: ["options"],
</script>

Vue 页面 2

</template>
<script>
  export default {
    name: "ListEntries",
    setup(){

      //computed properties

      const optionsArray = computed(
       () => (s) =>
           optionsArray.value.filter(stage || !stage
              )
    }
 }
</script>

【问题讨论】：

标签： javascript vue.js quasar-framework

【解决方案1】：

Provide/Inject 就是你要找的东西。

在您的 Page2.vue 中，使用 provide 方法：

<script>
import { provide, computed } from "vue";
  export default {
    name: "ListEntries",
    setup(){

      //computed properties

      const optionsArray = computed(
       () => (s) =>
           optionsArray.value.filter(stage || !stage
              )

      // this will make optionsArray globally available
      provide('optionsFromPage2', optionsArray);
    }
 }
</script>

在您的 Page1.vue 中，使用 inject 方法：

<template>
 <form >
  <q-select
    :options="optionsArray"
  />
  <q-btn label="Save" type="submit"  />
 </form>
</template>
<script>
  import { inject } from "vue";
  export default {
    name: "AddEntry",
    props: ["options"],
    setup() {
        // access the options array with inject method
        const optionsArray = inject('optionsFromPage2')
        return {optionsArray};
     }
    
</script>

【讨论】：

非常感谢。玩弄了它，但没有正确执行它，并认为这不是答案。这行得通。
很高兴它有帮助。除了答案之外，Provide/Inject 也可以使用 Options API 获得。你可以在这里阅读更多内容：v3.vuejs.org/guide/component-provide-inject.html

【解决方案2】：

您必须使用道具传递数据，共享整个代码和控制台错误（如果存在）

【讨论】：