我使用下面的“保持活動”實作了標簽功能，我想在所選的CurrentTabComponent為“舊”時將“Items2”資料傳遞給組件，如何進行這項作業？有什么解決方法嗎？
<template>
<div>
<button @click="currentTabComponent = 'New'"> New </button>
<button @click="currentTabComponent = 'Old'"> Old </button>
</div>
<keep-alive>
<component :is="currentTabComponent" :items="currentTabComponent === 'New' ? items : items2"></component>
</keep-alive>
</template>
在邏輯上，我有，
<script>
export default {
data() {
return {
currentTabComponent: "New",
items:['one','two','three'],
items2:['five','six','seven']
}
}
}
</script>
uj5u.com熱心網友回復：
即使你使用keep-aliveprops 也會以通常的方式傳遞，無論是否是動態的。因此，如果道具發生變化，它應該反映在子組件中。keep-alive特別有助于在不使用組件時保留狀態更改，并且在再次顯示組件時不重置狀態。但在這兩種情況下，道具都可以正常作業。
檢查以下代碼：
<div id='component-data'>
<button
v-for="tab in tabs"
v-bind:key="tab"
v-on:click="currentTab = tab">
{{ tab }}
</button>
<keep-alive>
<component v-bind:is="currentTab"
:items="currentTab == 'Bags' ? items[0] : items[1]"
></component>
</keep-alive>
</div>
<script>
Vue.component('Bags', {
props: ['items'],
template: "<div>Showing {{ items }} items in bags.</div>"
});
Vue.component('Shirts', {
props: ['items'],
template: "<div>Showing {{ items }} items in shirts.</div>"
});
new Vue({
el: "#component-data",
data: {
tabs: ['Bags', 'Shirts'],
currentTab: 'Bags',
items: [100, 200]
}
});
</script>
您應該確保子組件“新”和“舊”已items在其組件定義中宣告了道具。另外我希望“新”和“舊”是您用于選項卡的組件的注冊名稱。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/406882.html
標籤：
上一篇：如何使用帶有Vue3的VueRouter將物件作為道具傳遞？
下一篇：在Vue.js中使用DOM操作