三十九、Vue中监听器 watch 的使用

一、使用场景

  当我们需要监听某个属性时在变化时触发一系列的逻辑，那么就可以利用监听器实现。

二、案例

  当父组件接收到子组件传递过来的值时，顺次加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>