實現：

子組件Alphabet.vue中的數據傳遞給子組件Cities.vue，兄弟組件之間的數據傳參，可以通過父組件為媒介傳遞給另一個兄弟組件

子組件中通過this.$emit("自定義傳遞的名稱"，"要傳遞的數據or方法")傳遞數據給父組件，父組件通過v-on:自定義傳遞的名稱="自定義接收的名稱"去接收數據or方法。

效果：

右側字母列表為子組件Alphabet.vue，城市列表為子組件Cities.vue，當點擊右側列表中的字母時，城市列表會跳到對應的字母的城市，如點擊B會跳轉到B

子組件：alphabet.vue

把要傳遞給Cities.vue的數據先傳遞給父組件

<template><div><div class="alphabet"><div v-for="(items,key) in lists" :key="key" @click="letterClick">{{key}}</div></div></div> </template><script>export default {name: "alphabetList",props:{lists:Object},methods:{letterClick(e){//this.$emit("自定義傳遞的名稱"，"要傳遞的數據or方法")this.$emit("changeLetter",e.target.innerText);// console.log(e.target.innerText);}}} </script><style scoped>.alphabet{/*position: absolute;*/position: fixed;top: 2.2rem;right: 0;width: 10%;color: #28c54d;font-size: 0.32rem;display: flex;flex-direction: column;justify-content: center;text-align: center;z-index: 100;}.alphabet div{padding: 0.08rem 0;} </style>

父組件：searchCity.vue

在data中定義letter傳遞數據給子組件City.vue

<template><div><inputSearch></inputSearch><!--@changeLetter="handLetter"監聽子組件傳遞過來的方法changeLetterv-on:自定義傳遞的名稱="自定義接收的名稱" 接收數據 --><alphabetList:alphabets="alphabetList":lists="moreCities"@changeLetter="handLetter"></alphabetList><hotCityList :hLists="hotCities"></hotCityList><!--將父組件獲取的數據傳遞給子組件:cLetter="letter"--><Cities:mCities="moreCities":cLetter="letter"></Cities></div> </template><script>import hotCityList from './components/hotCityList'import Cities from './components/Cities'import inputSearch from './components/inputSearch'import alphabetList from './components/alphabetList'import axios from 'axios'export default {name: "searchCity",data(){return{hotCities:[],moreCities:{},alphabetList:[],letter:''}},components:{hotCityList,Cities,inputSearch,alphabetList},methods:{getCityInfo(){axios.get('/city.json').then(this.getCityInfoSucc).catch(err=>{console.log(err);})},getCityInfoSucc(res){console.log(res);res = res.data;if(res.ret && res.data){this.hotCities = res.data.hotCityList;this.moreCities = res.data.cities;this.alphabetList = res.data.Alphabet;}},//把子組件傳遞過來的數據賦值給letterhandLetter(msg){// console.log(msg);//接收到alphabet傳過來的數據this.letter = msg}},mounted() {this.getCityInfo()}} </script>

子組件：City.vue

接收父組件從子組件Alphabet.vue獲取到的數據

<template><div><div class="cities" ref="wrapper"><div><p class="citylist">城市列表</p><div v-for="(items,key) in mCities":key="key":ref="key"><div class="title">{{key}}</div><div class="city" v-for="item in items" :key="item.id"><div class="cityName">{{item.name}}</div></div></div></div></div></div> </template><script>import Bscroll from 'better-scroll'export default {name: "Cities",//接收數據cLetter:Stringprops:{mCities:Object,cLetter:String},updated(){this.scroll = new Bscroll(this.$refs.wrapper{mouseWheel: true}))},watch:{cLetter(){// console.log(this.cLetter);if(this.cLetter){//可以通過this.$refs獲取到城市列表區域對應的值，是一個數組const element = this.$refs[this.cLetter][0];//滾動到對應的元素上this.scroll.scrollToElement(element);}}}} </script>

加上mouseWheel: true以后鼠標可以滑動，也能拖動

總結

以上是生活随笔為你收集整理的vue城市搜索的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。