vue非父子组件传值方法，子组件1→父组件→子组件2（1）

思路：子组件1→父组件→子组件2

子组件1

<template>
    <div @click="handlCilck"></div>
</template>

<script>
    name:'CityHeader',
    methods:{
     bindlClick(e){
       this.$emit('Chenge',e.target.innerHTML) //父子组件传值通过$emit
     }
   }
</script>

父组件

<template> 
    <city-header @Change="bindlChange"></city-header> //接收这个值
    <city-list :letter="letter"></city-list>  把letter这个值传递到另外子组件
</template>

<script>
    components:{
       CityHeaer, 
       CityList
    },
    data(){
      return{
         letter:''   //定义一个letter
    },
    methods:{
        handlChange(letter){
          this.letter=letter
        }
    }
</script>

子组件2

<script>
  name:"CityList",
  props:{
    hotCities:Array,
    cities:Object,
    letter:String  //接收这个值
  }
  watch:{
    letter(){
       console.log(this.letter) //监听这个letter的变化
    }
  }  
</script>

 

实例：点击实现滚动到指定的循环区域  （:ref获取的是class，操作dom）

<div class="area" v-for="(item,key) of cities" :key="key" :ref="key"></div>

<script>
  name:"CityList",
  props:{
    hotCities:Array,
    cities:Object,
    letter:String  //接收这个值
  }
  watch:{
    letter(){
       console.log(this.letter) //监听这个letter的变化
    }
  }  
</script>