我正在嘗試將我的代碼重構為幾個組件，以使其看起來更具可讀性和更清晰，但我對如何在父組件中使用資料變數子組件感到困惑。在 ModalIdentifier 中，addPI_ID它應該設定為false這樣我們單擊ADD按鈕，模態識別符號將設定為 true 并且模態將彈出
ModalIdentifier.vue（子）
<template>
<v-dialog v-model="addPI_ID" width="600">
</v-dialog>
</template>
export default {
props: ["addPI_ID"],
}
addUser.vue(父)
<template>
<div>
<modal-identifier :addPI_ID="false"></modal-identifier>
//there's button, if we click that modal identifier dialog will pops up
<v-btn
color="#8FC23E"
@click="addPI_ID = true"
>ADD</v-btn>
</div>
</template>
這部分我很困惑，有什么更好的主意？
uj5u.com熱心網友回復：
道具是給父母的 -> 孩子
你可以使用 $emit 給孩子 -> 父母
在父母中：
- 使用addPI_ID控制對話框（顯示/隱藏），通過props將值從父級傳遞給子級
- 使用addPI_ID的新值偵聽要從子級向父級發出的事件“更新”
- 單擊按鈕 ADD 時將addPI_ID的值更改為 true（顯示對話框）
<modal-identifier :addPI_ID="addPI_ID" v-on:update="addPI_ID = $event"></modal-identifier>
<v-btn color="#8FC23E" class="mt-3 mb-6" @click="addPI_ID = true">ADD</v-btn>
在孩子：
- 創建一個計算屬性“ show ” ，每當我們設定“ show ”的值時，將我們的自定義事件“ update ”發送到父級（使用 addPI_ID 的新值）。當我們讀取“ show ”(get) 的值時，它會回傳我們的 prop addPI_ID的當前值
- 道具addPI_ID從父級接收值
<template>
<div>
<v-dialog v-model="show" width="600">
<v-btn color="primary" @click="show = false">Close</v-btn>
</v-dialog>
</div>
</template>
<script>
export default {
props: {
addPI_ID: Boolean
},
computed: {
show: {
get() {
return this.addPI_ID;
},
set(addPI_ID) {
this.$emit('update', addPI_ID);
},
},
},
};
</script>
希望能幫助到你！;)
uj5u.com熱心網友回復：
我不確定我是否正確理解了您的問題，但我認為您不應該將“false”傳遞給父級中的 modal-identifier 元素。您應該傳入 addPI_ID 的實際值，如下所示：
<modal-identifier :addPI_ID="addPI_ID"></modal-identifier>
如果您還沒有，您還應該在父級中宣告一個變數 addPI_ID：
data: {
...
addPI_ID: false,
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/432673.html
標籤：Vue.js Vuetify.js Vue 道具