对获取文章数据逻辑有点疑问？

Question

第一个问题：当我们打开app或者小程序的时候，应该是默认tabs第一项为主页，同时文章列表应该也与tabs第一个相对应，打开小程序的的时候应该自动获取数据并呈现。为什么要给my-tabs注册点击事件呢？

第二个问题：当切换tabs。通过onTabClick事件获取数据，这个事件是单独给每一个item注册，还是说有类似于事件委托的方式，给父级注册呢。

Answer 1

Sunday 2021-08-31 17:18:14

你好：

首先第一个问题：

你说的给 mytabs 注册点击事件指的是 

<my-tabs

        ....

        @tabClick="tabClick"

      ></my-tabs>

这个代码吧。  

这里需要明确一下，此处并不是给 my-tabs 添加点击事件，而是监听了  mytabs 组件中的  tabClick 通知。当 mytabs 组件中的 view 被点击时，会触发一个方法 tabClick，具体代码如下：

<view

                class="tab-item"

                :id="'_tab_' + index"

                :class="{ 'tab-item-active': activeIndex === index }"

                @click="tabClick(index)"

                ...

                >...</view>

在该 tabClick 被触发时，会发送一个事件，叫做 tabClick：

/**

     * tab 的点击事件处理

     */

    tabClick(index) {

      ....

      // 发送通知

      this.$emit('tabClick', index);

    },

这个  this.$emit('tabClick', index);  就是所监听的通知。

问题二：

就像问题一所说，问题二也就很明确了， onTabClick 是给每一个  item 注册的，并非事件分发

• 提问者 三清先森 #1

  十分感谢，了解原理了

Answer 2

qq_慕姐1024111 2021-08-31 16:28:05

我谈谈自己的见解吧，老师觉得哪不对麻烦指正一下。

问题一：

对于my-tabs的点击事件有2个，一个是在子组件my-tabs定义的onTabClick方法，另一个是子组件通过$emit返回给父组件的tabClick事件，方法也是onTabClick（也可能是一个方法定义在两个地方了，对$emit理解不是很深）

子组件的点击事件主要是修改激活的（选中的）item的样式以及下滑块的滑动位置，父组件的点击事件主要是传递选中的tab-item的索引值，并保存到hot.vue中进行调用。随后获取数据。

问题二：

没太理解你的问题，自己感觉应该是给每一个item都绑定了点击事件吧，父子组件的方法都能使用。

• 提问者 三清先森 #1

  我后边解决了，不是同一个方法定义了两个地方。而是这两个方法同名，把我弄混淆了。其实就是子组件通过$emit去触发父组件监听的事件，然后通过父组件的方法去修改父组件中的值。子组件不能直接修改父组件的值，需要借助中间人。也就是TabClick事件。

• Sunday #2

  可以看一下问题回复哦~~·