Vue.js 父子组件传值：props 和 emit 详解

父子组件之间传值通常有两种方式：props 和 emit。

使用 props 传值：父组件通过 props 将数据传递给子组件。在子组件中，通过定义 props 来接收父组件传递的数据。例如：

父组件：

<template>
  <div>
    <ChildComponent :message='message' />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

子组件：

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

<script>
 export default {
  props: ['message']
 }
</script>

使用 emit 传值：子组件通过 emit 事件将数据传递给父组件。在子组件中，使用 $emit 方法触发一个自定义事件，并传递需要传递的数据。在父组件中，通过在子组件标签上监听自定义事件，并通过事件参数接收子组件传递的数据。例如：

父组件：

<template>
  <div>
    <ChildComponent @message-updated='updateMessage' />
    <p>Message from child component: {{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

子组件：

<template>
  <div>
    <button @click='sendMessage'>Send Message</button>
  </div>
</template>

<script>
 export default {
  methods: {
    sendMessage() {
      this.$emit('message-updated', 'Hello World');
    }
  }
 }
</script>

以上是两种常见的父子组件传值方式，根据具体场景和需求选择合适的方式进行数据传递。