vue兄弟间传值

可以用过一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发$emit和监听$on来实现组件之间的通信和参数传递,类似window的全局自定义事件。类似与子传父,只不过是利用一个新的vue示例作为媒介,而不是当前vue示例(this)

// bus.js

import Vue from 'vue';

export default new Vue;

// a.js

<template>

  <div class='a'></div>

</template>

<script>

import Bus from 'bus.js' ;

export default {

  name: "a",

  created() {

    // 在需要的传递数据的时候调用sendData方法,这里模拟调用

    this.sendData();

  },

  methods: {

    sendData () {

      Bus.$emit('listenToA', 'hello');

    }

  }

}

</script>

// b.js

<template>

  <div class='b'></div>

</template>

<script>

import Bus from 'bus.js';

export default {

  name: "b",

  monted() {

    Bus.$on('listenToA', this.getAData);

  },

  methods: {

    getAData (val) {

      console.log(`a组件传递过来的数据: ${val}`); // hello

    }

  }

}

</script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容