vue中touch事件的使用,使兄弟组件联动,函数节流

 1. 对touch事件的理解:

当手指点下标签时,触发touchstart事件

当手指滑动时,触发touchmove事件

当手指抬起时,触发touchend事件

注意:点击事件会同时触发touchstart和touchend事件

注意:不管怎么滑动,或者滑动到哪里,事件对象都是该dom;而不是说滑动到别的标签后,触发的就是别的标签的滑动事件。

但是:滑动到别的位置,事件对象中的位置属性值会对应的改变,在事件的touches对象上:

dom对象也有offsetTop等值,也是计算距离的

使用方法:

兄弟组件联动:


函数节流:
注意:定时器timer定义在data中

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要调用兄弟组件函数,可以使用事件总线或者Vuex来实现。 1. 使用事件总线(Event Bus): 在Vue,可以通过创建一个空的Vue实例作为事件总线来实现组件间的通信。具体步骤如下: 在main.js或者其他入口文件创建一个空的Vue实例,并将其作为事件总线: ``` // main.js Vue.prototype.$bus = new Vue(); ``` 在发送方组件,通过事件总线触发一个自定义事件,并传递需要的参数: ``` // SenderComponent.vue methods: { callSiblingMethod() { this.$bus.$emit('siblingMethod', params); } } ``` 在接收方组件,通过监听事件总线上的自定义事件,并执行相应的方法: ``` // ReceiverComponent.vue created() { this.$bus.$on('siblingMethod', this.siblingMethod); }, methods: { siblingMethod(params) { // 执行兄弟组件的方法 } } ``` 2. 使用Vuex: 如果你已经在项目使用Vuex来管理状态,可以通过Vuex来实现兄弟组件的通信。 在Vuex的store定义一个state和一个mutation,用来保存需要共享的数据和修改数据的方法: ``` // store.js state: { sharedData: null }, mutations: { setSharedData(state, data) { state.sharedData = data; } } ``` 在发送方组件,通过commit方法触发mutation,修改共享数据: ``` // SenderComponent.vue methods: { callSiblingMethod() { this.$store.commit('setSharedData', params); } } ``` 在接收方组件,通过computed属性或者getter获取共享数据,并执行相应的方法: ``` // ReceiverComponent.vue computed: { sharedData() { return this.$store.state.sharedData; } }, watch: { sharedData(newVal) { // 执行兄弟组件的方法 } } ``` 以上两种方法都可以实现兄弟组件间的通信,具体选择哪种方法取决于你的项目需求和团队的技术栈。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值