父子组件间传值方式

在 Vue 中，父子组件之间传值可以使用 props 和 emit 两种方式。

1. props：父组件通过 props 属性向子组件传递数据，子组件通过 props 来接收数据。具体而言，可以在子组件中声明 props，然后在父组件中使用 v-bind 来绑定数据。例如：

<!-- 父组件 -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>

2. emit：子组件通过 emit 方法向父组件发送事件，并传递数据。父组件可以通过 v-on 来监听子组件发送的事件，并接收数据。具体而言，可以在子组件中使用 $emit 方法来发送事件，然后在父组件中使用 v-on 来监听事件。例如：

<!-- 父组件 -->
<template>
  <div>
    <child-component @my-event="handleChildEvent"></child-component>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleChildEvent(data) {
      this.message = data
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="handleClick">Click me</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('my-event', 'hello from child')
    }
  }
}
</script>

以上两种方式都可以用于父子组件之间的传值，具体使用哪种方式，需要根据具体场景来选择。如果是单向数据流，建议使用 props；如果是需要在子组件中触发事件，建议使用 emit。