第十三课时通讯录右侧字母表实现

新建字母表组件Alphabet.vue

<template>
	<ul class="list">
	  <li class="item"
	  <!-- 动态字母 -->
		 v-for="(item,key) of letters">{{item}}</li>
	</ul>
</template>

<script>
	export default {
		name: "Alphabet",
		props:{
		  phoneBooks:Object
		},
		computed:{  //通过计算属性为字母赋值
		  letters(){
			const lettes=[]
			for (let i in this.phoneBooks){
			  console.log(i)
			  lettes.push(i)
			}
			return lettes;
		  }
		}
	}
</script>

注：通过计算属性为右侧字母表赋值

放到phoneBook.vue 里面

<template>
	<div>
	  <phone-book-header></phone-book-header>
	  <phone-book-search></phone-book-search>
	  <phone-book-list :phoneBooks="phoneBooks"></phone-book-list>
	  <!-- 右侧字母 -->
	  <phone-book-alphabet :phoneBooks="phoneBooks"></phone-book-alphabet>
	</div>
</template>

<script>
  import axios from 'axios'
  import {getServerUrl} from '@/config/sys.js'
  import PhoneBookHeader from './components/Header'
  import PhoneBookSearch from './components/Search'
  import PhoneBookList from './components/List'
  import PhoneBookAlphabet from './components/Alphabet' //引入字母

	export default {
		name: "PhoneBook",
		data(){
		  return{
			phoneBooks:{}
		  }
		},
		components:{
		  PhoneBookHeader,
		  PhoneBookSearch,
		  PhoneBookList,
		  PhoneBookAlphabet //引入组件
		},
		.....
	}

注：可以看到list和alphabet 都通过传入:phoneBooks，再通过props获取数据。再一次证明phoneBooks数据放在phoneBook.vue获取是正确的。

实现效果