vue组件之间的传值

vue中组件之间的传值有好几种情况

1、父向子传值

父组件向子组件传值使用props，直接上实例

city.vue是父组件，list.vue是子组件
city.vue里定义cities和hotCities。这两个数据是放在图二位置。而:cities :hot是通过子组件props来接收的。

city.vue

data里定义cities ,letter,hotCities

对应的子组件list.vue中 使用props 接收cities， hot,还有letter

2、子组件向父组件传值

使用emit event

alphabet.vue是子组件

子组件通过this.$emit('change',this.letters[index]);将change事件触发出去，同时将,this.letters[index]参数传出去

city.vue是父组件

使用@change="handleLetterChange"

handleLetterChange（letter），这个letter就是子组件this.letters[index]参数，再将letter赋值给当前页面的数据 this.letter.所以说子向父传值通过$emit发送事件以及参数

 handleLetterChange (letter){
      this.letter = letter
      console.log(letter);
    }

　3、非父子组件之间的传值

1、使用bus，我的博客里有说，暂不讲

2、兄弟组件之间的传值，可以通过公共的父组件进行传值。

拿刚刚的一个例子来说 子组件是list.vue和alphabet.vue，父组件是city.vue

　alphabet.vue是子组件先向父组件city.vue传值，然后将letter，赋值给this.letter,这个时候city.vue可以使用这个letter，将值传给list.vue

list.vue中

将letter引进来以后，使用watch进行监听，一旦letter有变化的时候，执行letter（）

可以参考其他文档

https://www.cnblogs.com/daiwenru/p/6694530.html

https://blog.csdn.net/a15088712506/article/details/78967937