vue父子组件嵌套 锚点定位

父子、祖孙组件组件嵌套，父级容器监听了scroll事件：在子、孙子组建中点击相应的标题，定位到对应的位置，实现平滑滚动。

参考文章：https://blog.csdn.net/iceking66/article/details/78211213?locationnum=1&fps=1

一、在子组建中设置：

子组件页面设置如下：
菜单项：“topMenu” 为菜单数组
<button v-for="(item,index) in topMenu" :key="item.value" @click.native="jump(index)">{{item.name}}</button>

<组件1 class=".textcss"></组件1>
.....................
<组件n class=".textcss"></组件n>

在method中编写个方法
jump(index){
	let jump = document.querySelecotor('.textcss');
	let param = {
		index: index,
		jump: jump,
	};
	
	this.$root.eventHub.$emit('scrollTo',param);
}

二、父组件中编写，滚动：

父组件中 如： <div ref="viewhome"></div>

在父组件的 mounted中编写如下：
this.$root.eventHub.$on('scrollTo', (params)=>{
	let _this = this;  //这行必写
	let jump = params.jump;
	let index = params.index;
	let total = jump[index].offsetTop;
	let distance = _this.$refs.viewhome.scrollTop;
	let step = total/50;
	if(total > distance){
		smoothDown();
	} else {
		let newTotal = distance - total;
		step = newTotal / 50;
		smoothUp();
	}
	
	function smoothDown(){
		if(distance < total){
			distance += step;
			_this.$refs.viewhome.scrollTop = distance - 40; //减多少 需要根据页面调试
			//如果 _this 变成 this 提示 $refs未定义  --》这就是 开头  let _this = this;的作用
			// 这里通过$refs来操作dom来替代： document.body.scrollTop = distance   和  document.documentElement.scrollTop = distance
			setTimeout(smoothDown,10);
		}else{
			_this.$refs.viewhome.scrollTop = total - 40;
		}
	}
	
	function smoothUp(){
		if(distance > total){
			distance -= step;
			_this.$refs.viewhome.scrollTop = distance - 20;
			setTimeout(smoothUp, 10);
		}else{
			_this.$refs.viewhome.scrollTop = total - 20;
		}
	}
})