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

方法一:子传父,父传子

我们知道,兄弟组件上面肯定有一个父组件,那么你想一下,我们可以将子组件的值用$ 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: {AB},
  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()
  1. 在子组件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>
  1. 在子组件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函数里面也是可以的。

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

Logo

前往低代码交流专区

更多推荐