jq监听子元素被点击_vue开发app点击字母展示地区列表（兄弟组件之间联动）

下图这种地区搜索方式在很多app中都很常见，今天就使用vue框架中的 better-scroll 第三方包来实现页面滚动和点击侧边栏字母该字母开头的地区列表置顶功能。

1、A子组件通过使用 this.$emit(事件名字，事件携带内容) 向外触发事件

首先，在组件每个字母元素上绑定事件，在该事件中向外触发事件，并将值传递出去：

v-for="(item,key) in city"

:key="key"

@click="handleLetterClick"

>

{{ key }}

methods:{

handleLetterClick(e){

this.$emit('change',e.target.innerText)

}

2、父组件接收A组件传过来的事件，并通过属性来向B组件传值

因为组件传递过来的是单个字符串，所以，先在data中定义一个属性letter来接收这个值；

并在父组件模板中的组件中定义传递的方法@change="handleLetterChange"用来获取传递的值；

将letter属性传递给另一个子组件；

:city="cities"

:hot="hotCities"

:letter="letter"

:city="cities"

@change="handleLetterChange"

data(){

return{

letter:''

}

methods:{

handleLetterChange(letter){

this.letter = letter

}

3、B组件接收父组件传递过来的属性，并通过watch监听参数的变化，然后执行页面的滚动显示

首先，给每个地址列表区域元素加 ref ，better-scroll会根据ref给指定区域进行操作；

然后使用watch监听letter变化，并使用better-scroll中的scrollToElement接口执行页面滚动；

v-for="(item,key) in city"

:key="key"

:ref="key"

...

props:{

letter:String

watch:{

letter(){

if(this.letter){

// scrollToElement里只接受单个DOM元素，不接收数组

//因为上面的div元素是数组渲染出来的，所以这里this.$refs得到的是数组

const element = this.$refs[this.letter][0]

this.scroll.scrollToElement(element)

}

jq监听子元素被点击_vue开发app点击字母展示地区列表（兄弟组件之间联动）相关推荐

jq监听子元素被点击_jquery怎么监听点击事件？
HTML 事件是发生在 HTML 元素上的事情.那么我们要如何使用jquery来监听事件呢?下面我们就来看一下jquery监听事件的方法. jquery中可以使用click().on()等方法监听事件 ...
jq 检测元素内html变化,jq 监听 textarea 元素内容变化的方法
在前台是可以限制 textarea 元素内输入内容的长度的,当然是用 jquery 代码实现起来是最简单,方便的,JQ脚本通过对 textarea 元素内容变化的检测来判断内容是否超出指定的长度. j ...
JS实时监听DOM元素变化 - MutationObserver
使用 MutationObserver API实时监听DOM元素变化创建 MutationObserver 实列,接受一个用于监听到DOM元素变化的回调函数 const handleListenCh ...
Vue.js 之组件-监听子组件事件
1.监听子组件事件前面介绍了父组件如何通过 prop 向子组件传递数据,反过来,子组件如何向父组件通信呢? 在 Vue.js 中,这是通过自定义事件来实现的,子组件使用 $emit() 方法触发事件 ...
动态监听DOM元素的高度
1.背景考虑这样一种情况,产品同学希望达到以下功能: 在我们的网页中有一个固定区域,这个区域会用于渲染从后端拉取的含有图片等资源的富文本字符串. 他需要在内容不超过一个最大高度的时候完全显示所有内容 ...
Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）
问题描述监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表. 解决方案方法一: 监听window变化 ...
jq监听input type=file发生改变，即选择文件,并获取文件名称
jq监听input type="file"发生改变,即选择文件,并获取文件名称 <input id="fileupload" name="fil ...
vue监听dom元素变化修改echar图表
文章目录前言一.install监听依赖二.使用步骤 1.监听指定id并修改echarts宽高监听Windows窗口变化前言提示:这里可以添加本文要记录的大概内容: vue中监听dom元素变 ...
vue关于监听子组件接收从父组件传过来的动态值的问题
这几天开发时,发现了一个现象,当我想监听子组件接收的从父组件传过来的值得时候,watch不起作用,查了很多资料,大概的原因是因为watch监听得必须是第一次绑定得值,并且初始值发生了改变得时候才会监听 ...

jq监听子元素被点击_vue开发app点击字母展示地区列表（兄弟组件之间联动）

jq监听子元素被点击_vue开发app点击字母展示地区列表（兄弟组件之间联动）相关推荐

最新文章

热门文章