Vue3 Setup 语法糖：父子组件传值终极指南

Vue3 中父子组件传值：全面指南

**子
在 Vue3 中，父子组件之间的通信是通过 props 和 emit 这两个核心概念来实现的。Props 用于将数据从父组件传递到子组件，而 emit 用于将数据从子组件发送回父组件。

父组件传递数据

要将数据从父组件传递到子组件，您需要在父组件中使用 props 选项。Props 选项是一个包含子组件属性名的对象，其值为从父组件传递的数据。

<template>
  <ChildComponent :message="message" />
</template>

<script>
export default {
  props: ['message'],
  data() {
    return {
      message: 'Hello from parent!'
    }
  }
}
</script>

在上面的示例中，父组件传递了一个名为 message 的 prop，并将其值设置为 "Hello from parent!"。

子组件接收数据

在子组件中，可以使用 props 选项来接收来自父组件的数据。Props 是一个特殊的对象，包含父组件传递的所有数据。您可以在 setup 函数中使用 props 来访问这些数据。

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

<script>
export default {
  props: ['message'],
  setup(props) {
    return {
      message: props.message
    }
  }
}
</script>

在上面的示例中，子组件定义了一个名为 message 的 prop，并在 setup 函数中将其值设置为 props.message。这样，子组件就可以访问父组件传递的数据并将其显示在模板中。

子组件发送数据

要将数据从子组件发送回父组件，需要使用 emit 方法。Emit 方法接受两个参数：事件名和数据。事件名是您自定义的事件标识符，数据是您要发送的数据。

<template>
  <button @click="handleClick">Send data to parent</button>
</template>

<script>
export default {
  setup() {
    const handleClick = () => {
      this.$emit('sendData', 'Hello from child!')
    }

    return {
      handleClick
    }
  }
}
</script>

在上面的示例中，子组件定义了一个名为 handleClick 的方法，并在点击按钮时触发该方法。在 handleClick 方法中，子组件使用 $emit 方法发送一个名为 sendData 的事件，并附带数据 "Hello from child!"。

父组件接收数据

在父组件中，可以使用 defineEmits 选项来定义子组件可以发送的事件。DefineEmits 选项是一个包含子组件可以发送的事件名的对象，其值为事件的。

<template>
  <ChildComponent @sendData="handleData" />
</template>

<script>
export default {
  defineEmits: ['sendData'],
  methods: {
    handleData(data) {
      console.log(data) // Hello from child!
    }
  }
}
</script>

在上面的示例中，父组件定义了一个名为 sendData 的事件，并在 handleData 方法中处理该事件。当子组件发送 sendData 事件时，父组件会调用 handleData 方法，并将子组件发送的数据作为参数传递给该方法。

Vue3 和 Vue2.x 中父子组件传值的区别

Vue3 和 Vue2.x 中父子组件传值的基本原理是相同的。然而，Vue3 中引入了一些新的特性，使得父子组件传值更加灵活和方便。

• Props 传值： 在 Vue3 中，props 选项可以定义在组件的 setup 函数中，这使得 props 的使用更加灵活。
• Emit 传值： 在 Vue3 中，子组件可以使用 emit 方法来发送数据，这使得子组件向父组件发送数据更加简洁和直观。
• DefineEmits 选项： 在 Vue3 中，父组件可以使用 defineEmits 选项来定义子组件可以发送的事件。这使得父组件可以更好地控制子组件发送数据的行为，并避免意外事件的发生。

结论

通过了解 props 和 emit 的用法，您可以在 Vue3 中轻松地在父子组件之间传递数据。这使得您可以构建复杂的组件结构，并灵活地处理组件之间的通信。

常见问题解答

1. 什么是 props？
   Props 是用于从父组件向子组件传递数据的特殊对象。

2. 如何接收 props？
   在子组件中，可以在 setup 函数中使用 props 来接收 props。

3. 什么是 emit？
   Emit 是用于从子组件向父组件发送数据的特殊方法。

4. 如何处理父组件中子组件发送的事件？
   在父组件中，可以使用 defineEmits 选项来定义子组件可以发送的事件，并使用事件处理程序来处理这些事件。

5. Vue3 中父子组件传值与 Vue2.x 有什么区别？
   Vue3 引入了 setup 语法糖，使得 props 和 emit 的使用更加灵活和方便，并添加了 defineEmits 选项来更好地控制子组件发送的事件。