Vue组件通信传递数据的三种方式

在Vue组件通信中，常常需要进行数据传递，Vue提供了三种方式：props、$emit、$on/$once。

1. props

props是父组件向子组件传递数据的一种方式，可以传递任何类型的数据。

父组件定义：

<template>
  <child
    :title="title"
    :list="list"
    :num="num"
  />
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      title: '父标题',
      list: ['a', 'b', 'c'],
      num: 123
    }
  }
}
</script>

子组件定义：

<template>
  <div>
    <h3>{{ title }}</h3>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
    <span>{{ num }}</span>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    list: Array,
    num: Number
  }
}
</script>

在父组件中通过子组件标签的属性传递数据，在子组件中通过props接收数据。

2. $emit

$emit是子组件向父组件传递数据的一种方式，通过监听子组件的自定义事件，在子组件中触发$emit方法来传递数据。

父组件定义：

<template>
  <child @handle-click="handleClick" />
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  methods: {
    handleClick(value) {
      console.log(value)
    }
  }
}
</script>

子组件定义：

<template>
  <button @click="handleClick">点击</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('handle-click', '我是子组件传递的数据')
    }
  }
}
</script>

在父组件中通过子组件标签绑定自定义事件，子组件在需要传递数据时触发$emit方法，并将数据作为参数传递给父组件。

3. $on/$once

$on/$once是非父子组件之间传递数据的一种方式，通过Vue实例的事件总线来进行传递。

发送方定义：

<template>
  <button @click="handleClick">点击</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$root.$emit('send-data', '我是发送方传递的数据')
    }
  }
}
</script>

接收方定义：

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

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.$root.$on('send-data', this.handleReceive)
  },
  beforeDestroy() {
    this.$root.$off('send-data')
  },
  methods: {
    handleReceive(data) {
      this.message = data
    }
  }
}
</script>

在发送方中通过$root获取Vue实例，使用$emit方法发送数据；接收方中在created生命周期中监听'send-data'事件，并在beforeDestroy中卸载监听；使用handleReceive方法接收数据，并修改message的值。

综上所述，这三种方式都是Vue组件通信中常用的方法，可以根据具体的使用场景选择适合的方法来进行数据传递。