我有兩個 vue 頁面（使用類星體）。我想將一個頁面中的陣列用作另一頁面中的下拉串列。我認為它是作為道具傳遞的，但我無法弄清楚結構。它看起來不像一個真正的父子結構。該陣列作為計算函式進行計算。
如何將第 2 頁中計算函式 optionsArray 中計算出的陣列用作第 1 頁中的“選項”？
第 1 頁
<template>
<form >
<q-select
:options="options"
/>
<q-btn label="Save" type="submit" />
</form>
</template>
<script>
export default {
name: "AddEntry",
props: ["options"],
</script>
第 2 頁
</template>
<script>
export default {
name: "ListEntries",
setup(){
//computed properties
const optionsArray = computed(
() => (s) =>
optionsArray.value.filter(stage || !stage
)
}
}
</script>
uj5u.com熱心網友回復：
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>
uj5u.com熱心網友回復：
您必須使用道具傳遞資料，共享整個代碼和控制臺錯誤（如果存在）
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/366328.html
下一篇：如何在vueJs中使用屬性檔案？