vue项目笔记（17）-兄弟组件之间的联动

兄弟组件之间的联动

在本节中，我们将要实现点击右侧的Alphabet，左侧List组件可以移动到指定的位置，实现兄弟组件之间的通信，我们可以借助它们公共的父组件实现转发。具体步骤如下：

1、步骤一：兄弟组件1发送change，并传入参数e.target.innerText，而后需要在父组件City中监听该事件；

// Alphabet组件

      // Alphabet组件
      //  实现Alphabet组件与List非父子组件之间的通信，需要父组件转为两者中转方
      handleLetterClick(e){
        console.log(e.target.innerText);
        // 步骤一：兄弟组件1发送change，并传入参数e.target.innerText，而后需要在父组件City中监听该事件
        this.$emit('change', e.target.innerText)
      }

2、步骤二：City组件监听change事件，绑定方法；

3、步骤三：接收参数letter，转化给List组件；

4、步骤四：letter传递给List；

// City组件

    // City组件
    // 步骤三：接收参数letter，转化给List组件
      handleLetterChange(letter){
        console.log(letter);
        this.letter = letter;
      }

5、步骤五：接收letter；

6、步骤六：监听letter；

// list组件
    props: {
      cities: Object,
      hotCities: Array,
      // 步骤五：接收letter
      letter: String
    }
    // 步骤六：监听letter
    watch: {
      letter(){
        if (this.letter) {
          console.log(this.$refs[this.letter]); // 注意：这个是数组而不是元素节点
          const element = this.$refs[this.letter][0];
          this.scroll.scrollToElement(element); // 滚动到指定的位置
        }
        console.log(this.letter)
      }
    }

此时，已经实现组件间的联动了。

触摸事件