實(shí)現(xiàn)：

子組件Alphabet.vue中的數(shù)據(jù)傳遞給子組件Cities.vue，兄弟組件之間的數(shù)據(jù)傳參，可以通過(guò)父組件為媒介傳遞給另一個(gè)兄弟組件

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

效果：

右側(cè)字母列表為子組件Alphabet.vue，城市列表為子組件Cities.vue，當(dāng)點(diǎn)擊右側(cè)列表中的字母時(shí)，城市列表會(huì)跳到對(duì)應(yīng)的字母的城市，如點(diǎn)擊B會(huì)跳轉(zhuǎn)到B

子組件：alphabet.vue

把要傳遞給Cities.vue的數(shù)據(jù)先傳遞給父組件

<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("自定義傳遞的名稱"，"要傳遞的數(shù)據(jù)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傳遞數(shù)據(jù)給子組件City.vue

<template><div><inputSearch></inputSearch><!--@changeLetter="handLetter"監(jiān)聽(tīng)子組件傳遞過(guò)來(lái)的方法changeLetterv-on:自定義傳遞的名稱="自定義接收的名稱" 接收數(shù)據(jù) --><alphabetList:alphabets="alphabetList":lists="moreCities"@changeLetter="handLetter"></alphabetList><hotCityList :hLists="hotCities"></hotCityList><!--將父組件獲取的數(shù)據(jù)傳遞給子組件: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;}},//把子組件傳遞過(guò)來(lái)的數(shù)據(jù)賦值給letterhandLetter(msg){// console.log(msg);//接收到alphabet傳過(guò)來(lái)的數(shù)據(jù)this.letter = msg}},mounted() {this.getCityInfo()}} </script>

子組件：City.vue

接收父組件從子組件Alphabet.vue獲取到的數(shù)據(jù)

<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",//接收數(shù)據(jù)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){//可以通過(guò)this.$refs獲取到城市列表區(qū)域?qū)?yīng)的值，是一個(gè)數(shù)組const element = this.$refs[this.cLetter][0];//滾動(dòng)到對(duì)應(yīng)的元素上this.scroll.scrollToElement(element);}}}} </script>

加上mouseWheel: true以后鼠標(biāo)可以滑動(dòng)，也能拖動(dòng)

總結(jié)

以上是生活随笔為你收集整理的vue城市搜索的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。