207.[vue]模板组件

[webVueBlog]

[vue]

[webVueBlog]

<template>
	<view>
		<account-page ref="accountPage" :accountData="accountData"></account-page>
	</view>
</template>

<script>
	import accountPage from '../../components/account-page/account-page.vue'
	export default {
		components: {
			accountPage,
		},
		data() {
			return {
				accountData: [
					{
						id: 1,
						account: 'admin',
						show: false,
						children:[
							{
								id: 2,
								account: 'admin2',
								show:false,
								children:[
									{
										id: 2,
										account: '1',
										
									},
									{
										id: 3,
										account: '2',
									},
									{
										id: 4,
										account: '3',
									}
								]
							},
							{
								id: 3,
								account: 'admin3',
							},
							{
								id: 4,
								account: 'admin4',
							}
						]
					},
					
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			
		}
	}
</script>

<style scoped>
</style>

<template>
	<view>
		<view v-for="(item,index) in accountData" :key="index" >
			<view @click="showItem(item)" >{{item.account}}</view>
			<account-page style="margin-left: 20px;" v-if="item.children && item.show" ref="accountPage" :accountData="item.children"></account-page>
		</view>
		
	</view>
</template>

<script>
	import accountPage from '../../components/account-page/account-page.vue'
	export default {
		name: 'accountPage',
		components: {
			accountPage,
		},
		props: {
			accountData:{
				style: Array,
				default: []
			}
		},
		data(){
			return {
				
			}
		},
		methods: {
			showItem(item){
				if(item.show){
					item.show = false
				}else{
					item.show = true
				}
			}
		}
	}
</script>

<style>
</style>