学无止境,天涯煮梦!
登陆 | 注册

vue之better-scroll与子组件向父组件传递数据

发表于:2018-07-27 11:29:50 / 作者:煮梦 / 所属栏目:VUE

better-scroll的使用

应用场景:当页面元素使用position:fixed,并覆盖全屏,且内容高度大于屏幕区域时使用。 效果:上下滑动效果;内容高度小于屏幕高度时不触发。

一、安装到本地

npm i better-scroll -D

二、在需要使用的组件引入

import BetterScroll from 'better-scroll'

三、实例化前置条件

css属性中,必须包含:

position:fixed
top:0
left:0
bottom:0
overflow:hidden

四、为better-scroll指定要实例化的dom

<div ref='box1'>
……
</div>

五、实例化

mounted () {
  this.scroll = new BetterScroll(this.$refs.box1)
}

子组件向父组件传递数据

一、使用$emit方法,从子组件输出数据

应用场景:mounted、methods this.$emit('自定义事件', '要传输的内容') 例:点击button,传输数据

methods: {
  demoClick (ev) {
    this.$emit('changeDemo', ev.target.innerText)
    // 调用demoClick时,若未传入参数,且未写(),如@click="demoClick"
    // 函数将默认接收到event数据
    // target.innerText里存的是该button内包含的内容
    // 如<div @click="demoClick">123</div>
  }
}

二、父组件读取数据

选择要传递数据,引入的子组件,如<button-box></button-box> 写入标签 @changeDemo="changeDemo" 同时在methods中,定义一个函数:

changeDemo (letter) {
  //letter中,接收的即是子组件传递来的数据
  this.dataStr = letter
}

三、将letter的数据,传入相同父组件的兄弟组件中

就是常规的props传递参数

四、结合better-scroll实现类似于锚链接效果

场景:假设左侧是一个列表,以ABCD进行分类,右侧是ABCE字母导航,点击A,左侧内容跳转到A,点击B跳转到B 过程:组件child-button和child-list共用parent组件 child-button,将点击到的ABC数据,传入到parent,parent接收后,又传递到child-list 在child-list中,为每个分类标题所在的父级dom,添加ref,名称即是分类标题 如:

<div v-for="item in list" :key="item.id" :ref="item.title"></div>

然后到watch中,时时监控传递过来的props数据变化

props: {
  titleStr: String //每次只会传递一个A一个B
}
watch: {
  titleStr () {
    const titls = this.$refs[this.titleStr][0] //$refs此时有多个属性,第0个即为需要的属性
    this.scroll.scrollToElement(titls) //btter-scroll内置方法,用来进行跳转
  }
}
prev next