详细解释vue中组件间相互传值的示例代码

在 Vue 中，组件间的数据传递可以通过 props、事件等方式进行。

下面是一个简单的示例代码：

<template>
  <div>
    <child-component :message="parentMessage" @child-event="handleChildEvent"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent component!'
    }
  },
  methods: {
    handleChildEvent(message) {
      console.log(message)
    }
  }
}
</script>

在上面的代码中，`ParentComponent` 组件通过 `message` 属性向 `ChildComponent` 组件传递了一个字符串。同时，`ParentComponent` 通过 `@child-event` 事件监听 `ChildComponent` 发出的事件，并在 `handleChildEvent` 方法中处理事件。

下面是 `ChildComponent` 组件的代码：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  },
  methods: {
    sendMessage() {
      this.$emit('child-event', 'Hello from child component!')
    }
  }
}
</script>

在上面的代码中，`ChildComponent` 组件接收 `message` 属性，并且通过 `$emit` 方法发出了 `child-event` 事件，并向父组件传递了一个字符串。

这样，父组件和子组件之间就可以进行数据传递和事件通信了。