新建字母表组件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获取是正确的。