在Vue中我们也可以获取DOM对象
利用特殊特性ref和实例属性vm.$refs实现在Vue中获取到特定的DOM对象
1)首先在子组件的<template>中某个元素节点上声明ref特性,如下面是在goods.vue文件中的<template>中的定义:ref="menuWrapper"
<div class="menu-wrapper" ref="menuWrapper">
</div>
2)然后再goods.vue中的<script>标签里面输出语句里面的methods属性中定义一个方法,在该方法里面去引用上面的DOM节点:this.$refs.menuWrapper
<script>
import BScroll from 'better-scroll'; //引进这个实现上下滑动的插件
export default {
data(){
return {
goods:[]
}
},
created(){//在这个时刻向后台请求数据
this.$http.get('/api/goods').then((res) => {
res = res.body;
if( res.errno === ERR_OK ){
this.goods = res.data;
this.$nextTick(() => {
this._initScroll();
});
}
});
},
methods:{
_initScroll(){
//初始化需要滚动的对象
this.menuScroll = new BScroll(this.$refs.menuWrapper,{
click:true
});
}
}
}
</script>