vue 组件通信

vue 不同组件之间面临很多数据传输问题，以下介绍三种组件之间的数据传输方式

• 父传子
  • props
  • $refs
• 子传父
  • $emit
• 兄弟传值
  • 公共父组件
  • 事件总线（Event Bus）

父传子

props

在 Vue.js 中，可以使用 props 属性将数据和方法从父组件传递给子组件。通过 props，父组件可以将数据传递给子组件，并在子组件中使用这些数据或方法。父组件使用自定义属性，然后子组件使用 props

子组件

<template>
    <div>
        <p>{{ message }}</p>
        <button @click="callback">Call Parent Method</button>
    </div>
<template>

<script>
...//
    props: ['message', 'callback']
...//
</script>

父组件

<template>
    <div>
        <ChildComponent :message="parentData" :callback="parentMethod" />
    </div>
<template>

<script>
...//
    data() {
        return {
            parentData: '父'
        }
    },
    methods: {
        parentMethod() {
            console.log('父方法被调用');
        }
    }
...//
</script>

上述代码中，父组件通过 <ChildComponent :message="parentData" :callback="parentMethod" /> 将 parentData 和 parentMethod 传递给子组件。

子组件使用 props 选项来声明接收的属性，注意接收的 key 名是冒号后的名字

$refs

在 Vue.js 中，你可以使用 $refs 来在父组件中访问子组件的实例或DOM元素。通过$refs，你可以将子组件的数据或方法传递给父组件，实现父传子的数据传递。

子组件

<template>
    <div>
        <p>{{ msg }}</p>
    </div>
<template>

<script>
...//
    data() {
        return {
            msg: ''
        }
    },
    methods: {
        getMsg(s) {
            this.msg = s
        }
    }
...//
</script>

父组件

<template>
    <Son ref="msg"></Son>
<template>

<script>
 ...//
    mounted() {
        this.$refs.msg.getMsg("父传子数据")
    }
 ...//
</script>

上述代码中，父组件通过给子组件绑定 ref，从而通过 this.$refs.msg 拿到子组件的实例，继而调用子组件的 getMsg 方法，通过方法参数将数据传递给子组件。

子传父

$emit

子组件使用$emit方法来触发一个自定义事件，并将需要传递给父组件的数据作为参数传递。父组件可以在模板中监听该事件，并通过相应的处理函数来接收数据。

子组件

<template>
    <div>
        <p>子组件</p>
    </div>
<template>

<script>
...//
    mounted() {
        this.$emit('getMsg', '我从子组件传过来的')
    }
...//
</script>

父组件

<template>
    <div>
        <Son @getMsg="showMsg"></Son>
    </div>
<template>

<script>
 ...//
    data() {
        return {
            title: ''
        }
    },
     methods: {
        showMsg(title) {
            this.title = title
        }
    }
 ...//
</script>

上述代码中，父组件通过 @ 绑定监听 getMsg 事件，子组件在 Vue 实例挂载到 DOM 后触发 mounted 钩子函数，执行 $emit 事件触发 getMsg 事件，父组件监听到该事件执行绑定的 showMsg 函数。

兄弟传值

1. 可以使用公共父组件，子组件 A 将数据传给父组件，父组件再传给另一个子组件 B

2. 使用事件总线（Event Bus）

事件总线是一个Vue实例，可以用于发布和订阅事件，让不直接关联的组件之间进行通信。

首先要创建一个名为 EventBus.js 的文件，里面创建了一个 Vue 实例作为事件总线。

// EventBus.js
import Vue from 'vue';
const bus = new Vue();
export default bus;

组件 A

<script>
import EventBus from './EventBus.js';

export default {
  data() {
    return {
      msg: '123456'
    };
  },
  methods: {
    sendMessage() {
      EventBus.$emit('message-updated', this.inputMessage);
    }
  }
}
</script>

组件 B

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import EventBus from './EventBus.js';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message-updated', this.updateMessage);
  },
  methods: {
    updateMessage(message) {
      this.message = message;
    }
  }
}
</script>

上述代码中，定义了一个全局事件总线 EventBus.js 的 Vue 实例作为事件总线，通过 EventBus 实例来监听 message-updated 事件。

通过使用事件总线，组件 A 可以通过EventBus.$emit来触发事件并传递数据，而组件 B 可以通过EventBus.$on来监听事件并接收数据。

新手写文，多多包涵，如有错误，欢迎指正