Vue 基礎 IV.
這裡製作一個樹狀式的選單
v-for 樹狀結構渲染
通常渲染陣列不只一或兩層，有時面對資料龐大時會有三到四層的陣列，最常看見的就是手風琴式的選單上，這時候就必須配合用到props。
資料架構
js
...
const list=reactive([
{name:'A',
children:[
{title:'a-1',
link:'/a1',
children:[
{title:'a1-1',
children:[
{title:'a1-1-1'}
]}
]},
{title:'a-2',
link:'/a2',
children:[
{title:'a2-1',
children:[
{title:'a2-1-1'}
]}
]},
]
},
{name:'B',
children:[
{title:'b-1',
link:'/b1',
children:[
{title:'b1-1',
children:[
{title:'b1-1-1'}
]}
]},
]
}
])
引入 components
Vue3 的 Components 寫法比 Vue2 方便多了，不須再多餘的宣告，所以兩者會有不同的宣告寫法，要注意。
- 將
Child標籤引入父層後，必須要給個props資料 ( item ) 送到子層使用。 - 在子層也需要使用
Child標籤來引入第2層或更多層。 - 子層需宣告
props的類型，並在標籤上標示:item，代表拿取父層給的props資料。
js
<template>
<Child v-for="item in list" :key="item.name" :item="item"></Child>
</template>
<script setup>
import {reactive} from 'vue'
import Child from './children.vue'
const list=reactive([...])
</script>
js
<template>
...
<a @clickj='isOpen=!isOpen'> {{item.name}}{{ isOpen?"-":"+" }} </a>
...
<div v-if="item.children">
<Child v-show="isOpen" v-for="items in item.children" :key="items.id" :item="items">
</Child>
</div>
</template>
<script setup>
import {ref} from "vue"
const props=defineProps({
item:Object
})
...
const isOpen= ref(false)
...
</script>
提醒
這裡要記住標籤名稱是否正確，否則會出現找不到的情形，再來有遇過.vue檔名必須要駝峰式寫法，否則容易判斷錯誤，出現一樣的問題。 