Vue3——通过父子传值控制多组件之间的屏幕滚动

这次遇到的问题是在做一个官网的过程中，需要点击头部组件的导航栏 是他滚动到对应的位置。然后就去网上去找了各种资料。这里记录一下

首先我们需要在总的index页面定义一个滚动的方法：

const scorllToSection = (sectionId: string): void => {
  const section = document.getElementById(sectionId)
  if (section) {
    window.scrollTo({ top: section.offsetTop, behavior: 'smooth' })
  }
}

然后将这个方法传到头部组件里面去

<BannerHeader @scorllToSection="scorllToSection" />

在头部组件导航栏的菜单上定义一个点击事件

<li><a href="#" @click="scorllToSectionFa('about')">关于我们</a></li>

然后定义一个点击方法调用传过来的scorllToSection 方法 将about 传到该方法上

const myEmit = defineEmits(['scorllToSection'])
const scorllToSectionFa = (section: string) => {
  myEmit('scorllToSection', section)
}

最后在尾部组件中加上id为about的属性就能进行跳转了

<div id='about'></div>