## 父子组件的传参 **word.vue** 给子组件添加点击事件获取点击对象的参数值 ``` <li v-for="item of word" :key="item.id" @click="handleClick">{{item}}</li> ``` 向父组件传递该自定义函数及其中的值 ``` methods: { handleClick(event){ this.$emit("changeWord",event.target.innerText); } }, ``` **** **city.vue** 接收word子组件传递过来的函数 ``` <city-word :word="word" @changeWord="handleWord"></city-word> ``` 定义将要传递给list的letter属性，用以承接word中点击获得的参数 ``` data() { return { letter:"", }; }, ``` 将word值传递给list的letter属性 ``` methods: { handleWord(word){ this.letter = word; } }, ``` 给list组件传递该letter属性 ``` <city-list :hotCities="hotCities" :cities="cities" :letter="letter"></city-list> ``` **** **list.vue** 定义从city传入的letter属性 ``` props:["cities","hotCities","letter"], ``` 给需要获取dom节点的元素ref属性 >[danger]给ref变量（:ref）的原因是为了动态获得对应的键（字母） 如果传递ref，则无法获取到各个字母 ``` <p class="c-title" :ref="index">{{index}}</p> ``` 在侦听属性中添加对letter参数的操作 (因为参数值一直在改变，所以在watch侦听属性中来操作) ``` watch:{ letter(){ var element = this.$refs[this.letter][0]; this.scroll.scrollToElement(element); } } ``` >[danger]1. this.$refs得到一个与index值（各个字母）有关的对象集合 this.letter是点击时当前的字母值 this.$refs[this.letter]动态获取对应的dom节点 >2. 添加滚动效果，实现点击对应字母跳转到对应区域 >[info]console.log(this.$refs\[this.letter\]); console.log(this.$refs\[this.letter\]\[0\]);的区别 两者分别输出： [p.c-title] `<p data-v-20e944ed="" class="c-title">A</p>`