一、使用场景
当我们需要监听某个属性时在变化时触发一系列的逻辑,那么就可以利用监听器实现。
二、案例
当父组件接收到子组件传递过来的值时,顺次加1
1.父组件传递数值给子组件
<template>
<div>
.....
<city-list :letter="letter" />
</div>
</template>
<script>
....
import CityList from "./components/List"
export default {
name: "City",
components: {
CityAlphabet
},
data() {
return {
cities: {},
hotCities: [],
letter: ''
}
},
methods: {
handleLetterChange (letter) {
this.letter = letter
}
}
};
</script>
2.子组件接收传递的数值,并作出相应的处理逻辑
子组件
<script>
import BScroll from 'better-scroll'
export default {
...
// 监听器
watch: {
// 监听 letter 属性的变化
letter () {
if (this.letter) {
// 注意:因为是循环获取的 ref,所以 this.$refs 是一个数组,
// 要想获取DOM元素,则需要取第一个
const element = this.$refs[this.letter][0]
// better-scroll插件提供的接口
this.scroll.scrollToElement(element)
}
}
},
props: {
.....
//接收父组件传值
letter: String
}
}
</script>