城市选择26字母页
去哪网做到根据字母选择城市的页面,记录一下这个的实现
首先在给循环出来的li元素上添加点击事件,通过点击事件获取到所点击的字母,通过$emit向父组件发送事件,并将获取到的元素传到父元素中
handleLetterClick (e) {
this.$emit('change', e.target.innerHTML)
},
父元素接收并定义事件,现在data中初始化即将收到的字母,然后将子组件传过来的数据,赋值给data中定义的变量,再将数据通过绑定属性的方式传给另外一个组件
<city-list :letter="letter" :cities="cities" :hotCities="hotCities"></city-list>
<city-alphabet @change="handleLetterChange" :cities="cities"></city-alphabet>
data () {
return {
letter: ''
}