七十、vue城市页面ajax动态渲染和兄弟组件数据传递 -尊龙游戏旗舰厅官网

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

@author：runsen

写在前面：我是「runsen」，热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端，需要每天的日积月累， 每天都要加油！！！

今天将完成vue城市页面动态渲染和兄弟组件数据传递。

在之前的项目代码中，城市页面的数据是写死的。

文章目录

• axios发json请求
• city.vue
• list.vue
• alphabet.vue
• 兄弟组件数据传递
• city.vue
• alphabet.vue
• list.vue

首先在static准备json文件

在网页端可以通过路由访问

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> <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> <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> <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> <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动态渲染和兄弟组件数据传递的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。