vue城市搜索

该博客介绍了如何在Vue.js中实现在子组件Alphabet.vue和Cities.vue之间通过父组件作为媒介传递数据,实现城市列表按字母快速定位的功能。当点击Alphabet.vue中的字母时,Cities.vue会跳转到对应字母的城市。文章详细讲解了子组件通过$emit发送事件和父组件通过v-on接收事件的过程。
摘要由CSDN通过智能技术生成

实现:

子组件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="k
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值