vue中兄弟组件之间的联动，兄弟组件之间的传值

vue中兄弟组件之间的联动，兄弟组件之间的传值

兄弟组件之间的传值，使得兄弟组件之间可以联动，相互操作

方法1：借助父组件，让两个兄弟组件可以联动，子组件A将值传递给父组件，父组件再将值传递给子组件B

第一步：子组件A传值给父组件

通过$emit将e.target.innerText传递给父组件

<template><div class="initail"><ul><li v-for="(item,key,index) of cities" :key="index"@click="handleInitail">{{key}}</li></ul></div>
</template><script>
export default {name: 'Initail',props: {cities: Object},methods: {handleInitail (e) {console.log(e.target.innerText)this.$emit('message', e.target.innerText)}}
}
</script

第二步：父组件接收子组件A的传值，并将值保存到自己的data中，并取名letter（letter：字母）

第三步：父组件将letter传递给子组件B

子组件B通过props接收该值

下面就是子组件B监听到letter值的变化后作出反应：用watch对象来监听

补充知识：Better-scroll插件中，提供一个方法，到指定的标签区域，或者说是，让某个指定的dom，出现到屏幕中，展现给用户。

需要注意的是：

上图中中的ref=“key”，由于此处是循环绑定的dom，所以打印dom的结果：

是个数组，第一位是dom元素

所以，在使用scrollElement()方法的时候：

方法2：bus总线传值

思路：在Vue的原型上创建一个属性bus，该属性的值为new Vue（），即bus也是一个vue实例

第一步：在main.js中创建bus总线

第二步：在子组件A中，通过bus总线抛出信息和值。this.bus就是Vue实例，$emit也是上面的方法

第三步：在子组件B中，在created或mounted等生命周期函数上，监听那个事件和获取那个值。

注意：bus总线，是联动的，当A组件触动bus总线的时候，B组件中也会响应式的触发。

B组件中的bus，需要在函数中，比如：created函数、mounted函数、甚至是data函数。

data中：

生命周期函数中：

总之，监听bus总线的事件，必须要函数中，但是该函数执行的时候，跟bus总线无关。

路由组件中：两个组件不在一个页面，bus总线即使改变了值，当点击另一个路由路径的时候，data函数又将值初始化了，

所以说，bus总线作用的两个组件应该在同一页面中。当然，可以用一个仓库来存储这个改变的值，比如：vuex、webStorage、数据库等等。

比如：bus在vuex中使用：

A组件：

    methods: {handleClick () {this.bus.$emit('busEvent', this.loginFlag) //1、发出“事件和值”}},

B组件：

<script>
export default {data () {return {busValue: this.$store.state.login ,//(2)从store中获取该值}},methods: {handleClick () {console.log(this.busValue)}},created () {var localValue;this.bus.$on('busEvent', res => {localValue = res//当bus触发时，这里生效，将busValue值修改了，//但是，当点开该页面路由组件的时候，data函数初始化了busValue值this.$store.state.login = res; //(1)将该值存在store中})}}
</script>

但是，还是有问题：当用户未点击过B路由组件前，点击A路由组件不会触发bus总线，因为，B组件的代码根本没有加载过来。

现在就出现了这种情况：A已经触发了bus总线，B不能监听到bus总线。

所以说，A、B组件还是在一个页面时，可以使用bus总线。