关于多种题型中的题目锚点问题

1. 问题描述

组件描述图

① 题目锚点导航栏（ojTopicNav）与题目列表（ojTopicSetTopicList）被同一父组件引用，但数据不同步

题目锚点导航栏(ojTopicNav)与题目列表(ojTopicSetTopicList)

  ②最后应达到点击题目锚点导航栏的题号，即可锚定相应题目的效果

最终实现效果图

 2. 解决方式

（1） 数据不同步问题 --> 同为子组件之间的通信

由于 data（题目数据）通过接口从 ojTopicSetTopicList（题目列表）组件接入，

故需将 data 通过 this.$emit() 方式传给父组件 topicSetDetail ，

再由父组件 topicSetDetail 将 data 传给子组件 ojTopicNav（题目锚点导航栏），

实现两个子组件之间的数据通信。

 

 

 子组件给父组件传值：vue子组件给父组件传值

父组件向子组件传值：vue中父组件向子组件传值

（2） 实现锚点跳转

① 绑定id

 ② 使用anchor()方法 

（3）anchor()方法效果如下：

    /*锚链接跳转*/
    anchor(anchorName) {
      /*找到锚点*/
      let anchorElement = document.getElementById(anchorName)
      /*如果对应id的锚点存在，就跳转到锚点*/
      if (anchorElement) {
        this.$nextTick(() => {
         anchorElement.scrollIntoView(true)({
           behavior: 'smooth',
         })
        })
        console.log('看看anchorName', anchorName)
        console.log('看看anchorElement', anchorElement)
      }
    },

看看 anchorName 和 anchorElement ：