2020/10/29、 周四、今天又是奮斗的一天。

@Author：Runsen

寫在前面：我是「Runsen」，熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。大四棄算法轉前端，需要每天的日積月累， 每天都要加油！！！

今天將完成Vue城市頁面動態渲染和兄弟組件數據傳遞。

在之前的項目代碼中，城市頁面的數據是寫死的。

文章目錄

• axios發json請求
• City.vue
• List.vue
• Alphabet.vue
• 兄弟組件數據傳遞
• City.vue
• Alphabet.vue
• List.vue

axios發json請求

首先在static準備json文件

在網頁端可以通過路由訪問

City.vue

Ajax動態渲染需要設置mounted掛載組件前的鉤子函數，訪問json，在data數據中儲存起來。

下面就是在子組件中綁定父組件的數據。

<template><div><city-header></city-header><city-search></city-search><city-list :cities="cities" :hot="hotCities"></city-list><city-alphabet :cities="cities"></city-alphabet></div> </template><script> import axios from 'axios' import CityHeader from './components/Header' import CitySearch from './components/Search' import CityList from './components/List' import CityAlphabet from './components/Alphabet'export default {name: 'City',components: {CityHeader,CitySearch,CityList,CityAlphabet},data () {return {cities: {},hotCities: []}},methods: {getCityInfo () {axios.get('/api/city.json').then(this.handleGetCityInfoSucc)},handleGetCityInfoSucc (res) {res = res.dataif (res.ret && res.data) {const data = res.datathis.cities = data.citiesthis.hotCities = data.hotCities}}},mounted () {this.getCityInfo()} } </script><style lang="stylus" scoped></style>

List.vue

<template><div class="list" ref="wrapper"><div><div class="area"><div class="title border-topbottom">當前城市</div><div class="button-list"><div class="button-wrapper"><div class="button">北京</div></div></div></div><div class="area"><div class="title border-topbottom">熱門城市</div><div class="button-list"><divclass="button-wrapper"v-for="item of hot":key="item.id"><div class="button">{{item.name}}</div></div></div></div><div class="area" v-for="(item, key) of cities" :key="key"><div class="title border-topbottom">{{key}}</div><div class="item-list"><divclass="item border-bottom"v-for="innerItem of item":key="innerItem.id">{{innerItem.name}}</div></div></div></div></div> </template> <script> import Bscroll from 'better-scroll' export default {name: 'CityList',props: {hot: Array,cities: Object},mounted () {this.scroll = new Bscroll(this.$refs.wrapper)} } </script><style lang="stylus" scoped>@import '~styles/varibles.styl'.border-topbottom&:beforeborder-color: #ccc&:afterborder-color: #ccc.border-bottom&:beforeborder-color: #ccc.listoverflow: hiddenposition: absolutetop: 1.58remleft: 0right: 0bottom: 0.titleline-height: .54rembackground: #eeepadding-left: .2remcolor: #666font-size: .26rem.button-listoverflow: hiddenpadding: .1rem .6rem .1rem .1rem.button-wrapperfloat: leftwidth: 33.33%.buttonmargin: .1rempadding: .1rem 0text-align: centerborder: .02rem solid #cccborder-radius: .06rem.item-list.itemline-height: .76rempadding-left: .2rem </style>

Alphabet.vue

<template><ul class="list"><li class="item" v-for="(item, key) of cities" :key="key">{{key}}</li></ul> </template><script> export default {name: 'CityAlphabet',props: {cities: Object} } </script><style lang="stylus" scoped>@import '~styles/varibles.styl'.listdisplay: flexflex-direction: columnjustify-content: centerposition: absolutetop: 1.58remright: 0bottom: 0width: .4rem.itemline-height: .4remtext-align: centercolor: $bgColor </style>

兄弟組件數據傳遞

City.vue

<template><div><city-header></city-header><city-search></city-search><city-list:cities="cities":hot="hotCities":letter="letter"></city-list><city-alphabet:cities="cities"@change="handleLetterChange"></city-alphabet></div> </template><script> import axios from 'axios' import CityHeader from './components/Header' import CitySearch from './components/Search' import CityList from './components/List' import CityAlphabet from './components/Alphabet' export default {name: 'City',components: {CityHeader,CitySearch,CityList,CityAlphabet},data () {return {cities: {},hotCities: [],letter: ''}},methods: {getCityInfo () {axios.get('/api/city.json').then(this.handleGetCityInfoSucc)},handleGetCityInfoSucc (res) {res = res.dataif (res.ret && res.data) {const data = res.datathis.cities = data.citiesthis.hotCities = data.hotCities}},handleLetterChange (letter) {this.letter = letter}},mounted () {this.getCityInfo()} } </script><style lang="stylus" scoped></style>

Alphabet.vue

<template><ul class="list"><liclass="item"v-for="item of letters":key="item":ref="item"@touchstart="handleTouchStart"@touchmove="handleTouchMove"@touchend="handleTouchEnd"@click="handleLetterClick">{{item}}</li></ul> </template><script> export default {name: 'CityAlphabet',props: {cities: Object},computed: {letters () {const letters = []for (let i in this.cities) {letters.push(i)}return letters}},data () {return {touchStatus: false,startY: 0,timer: null}},updated () {this.startY = this.$refs['A'][0].offsetTop},methods: {handleLetterClick (e) {this.$emit('change', e.target.innerText)},handleTouchStart () {this.touchStatus = true},handleTouchMove (e) {if (this.touchStatus) {if (this.timer) {clearTimeout(this.timer)}this.timer = setTimeout(() => {const touchY = e.touches[0].clientY - 79const index = Math.floor((touchY - this.startY) / 20)if (index >= 0 && index < this.letters.length) {this.$emit('change', this.letters[index])}}, 16)}},handleTouchEnd () {this.touchStatus = false}} } </script><style lang="stylus" scoped>@import '~styles/varibles.styl'.listdisplay: flexflex-direction: columnjustify-content: centerposition: absolutetop: 1.58remright: 0bottom: 0width: .4rem.itemline-height: .4remtext-align: centercolor: $bgColor </style>

List.vue

<template><div class="list" ref="wrapper"><div><div class="area"><div class="title border-topbottom">當前城市</div><div class="button-list"><div class="button-wrapper"><div class="button">北京</div></div></div></div><div class="area"><div class="title border-topbottom">熱門城市</div><div class="button-list"><divclass="button-wrapper"v-for="item of hot":key="item.id"><div class="button">{{item.name}}</div></div></div></div><divclass="area"v-for="(item, key) of cities":key="key":ref="key"><div class="title border-topbottom">{{key}}</div><div class="item-list"><divclass="item border-bottom"v-for="innerItem of item":key="innerItem.id">{{innerItem.name}}</div></div></div></div></div> </template><script> import Bscroll from 'better-scroll' export default {name: 'CityList',props: {hot: Array,cities: Object,letter: String},mounted () {this.scroll = new Bscroll(this.$refs.wrapper)},watch: {letter () {if (this.letter) {const element = this.$refs[this.letter][0]console.log(element)this.scroll.scrollToElement(element)}}} } </script><style lang="stylus" scoped>@import '~styles/varibles.styl'.border-topbottom&:beforeborder-color: #ccc&:afterborder-color: #ccc.border-bottom&:beforeborder-color: #ccc.listoverflow: hiddenposition: absolutetop: 1.58remleft: 0right: 0bottom: 0.titleline-height: .54rembackground: #eeepadding-left: .2remcolor: #666font-size: .26rem.button-listoverflow: hiddenpadding: .1rem .6rem .1rem .1rem.button-wrapperfloat: leftwidth: 33.33%.buttonmargin: .1rempadding: .1rem 0text-align: centerborder: .02rem solid #cccborder-radius: .06rem.item-list.itemline-height: .76rempadding-left: .2rem </style>

參考課程：慕課網Vue2.5->2.6->3.0 開發去哪兒網App 從零基礎入門到實戰項目開發

總結

以上是生活随笔為你收集整理的七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递的全部內容，希望文章能夠幫你解決所遇到的問題。

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