vue中兄弟组件之间传值

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

方法一：子传父，父传子

我们知道，兄弟组件上面肯定有一个父组件，那么你想一下，我们可以将子组件的值用$ eimt方法传递给父组件（当然还有很多方法，比如$parent.xxx,当然xxx为父组件的一个函数）小编专门做了一期组建之间的传值，不会的小伙伴可以去看看，也可以将父组件的值用prop方法传递给子组件。想一下，经过这么峰回路转，是不是可以将兄弟A组件的值传递给父组件，然后父组件又可以将值传递给子组件B呢，来，上代码

组件A：

<template>
  <div class="ul">
  </div>
</template>

<script>
export default {
  name: 'A',
  data() {
    return {
      todos: [
        {id: '001', name: '吃饭', isOk: false},
      ],
    };
  },
  mounted() {
    this.$emit('dataAll',this.todos) //$emit传两个参数，第一个为父组件的自定义事件，第二个参数就是要带过去的值
  },
};
</script>

<style scoped>
</style>

父组件：

<template>
  <div id="app">
    <A @dataAll = 'dataAll'></A> //自定义一个事件
    <B :todoB="todosApp"></B>
  </div>
</template>
<script>
import B from './components/B';
import A from './components/A';
export default {
  name: 'App',
  components: {A，B},
  data() {
    return {
      todosApp: [],
    };
  },
  methods: {
    dataAll(val) {
      this.todosApp = val;
      console.log(val) //当然这里输出的是子组件穿过来的todos
    },
  },
};
</script>

组件B

<template>
  <div>
  <!-- todoB.name = 吃饭 -->
  {{todoB.name}}
  </div>
</template>

<script>
export default {
  name: 'B',
  props:['todoB'],
};
</script>

<style scoped>
</style>>

以上代码看懂了吗小伙伴，我们实现了A组件与B组件之间的通讯

方法二：bus总线传值

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

1. 在main.js中创建总线

main.js:

Vue.prototype.bus = new Vue()

2. 在子组件A中抛出信息和值，this.bus就是vue的实例，$emit也是上面的方法

<template>
  <div class="ul" @click='pop'>
  </div>
</template>

<script>
export default {
  name: 'A',
  data() {
    return {
      todos: [
        {id: '001', name: '吃饭', isOk: false},
      ],
    };
  },
  methods() {
	pop(){
	  this.bus.$emit('todosAll',this.todos) 
   }
  },
};
</script>

<style scoped>
</style>

3. 在子组件B中，在生命周期函数上获取传过来的值

<template>
  <div>
  </div>
</template>

<script>
export default {
  name: 'B',
  mounted(){
  	this.bus.$on('todosAll',res => {
		console.log(res) // 输出的是A组件传过来的{id: '001', name: '吃饭', isOk: false}
	})
  }
};
</script>

<style scoped>
</style>>

注意：当组件A中的bus触发，那么组件B中就会相应是触发，B组件中的bus，必须是在函数里面，比如生命周期函数，甚至data函数里面也是可以的。

小伙伴们，你们学废了吗哈哈哈，欢迎各位大神多多提宝贵意见。