Vue3.2 (setup语法糖) 父子组件传值和传方法详解

前端

2023-10-03 23:12:57

Vue3.2: 提升父子组件通信体验

在Vue3.2版本中，备受期待的setup语法糖为父子组件通信带来了革命性的优化。告别了Vue2中复杂且冗长的props和events机制，新语法带来了更简洁、直观且灵活的通信方式。

从复杂到简洁

在Vue2中，父子组件的通信涉及到props和events，父组件通过props将数据传递给子组件，子组件通过events将数据传递给父组件。虽然这种方式实现了通信，但代码却显得繁琐且难以维护。

Vue3.2中的setup语法糖将这一繁琐的过程简化为了几个步骤：

父组件使用emit函数向子组件传递数据。
子组件使用props函数接收父组件传递的数据。
子组件使用emit函数向父组件传递数据。
父组件使用on函数监听子组件传递的数据。

拥抱灵活性

新语法不仅简洁，而且灵活。它支持各种父子组件通信场景：

父组件向子组件传递数据。
子组件向父组件传递数据。
父子组件之间的双向通信。

示例代码

以下是一个使用setup语法糖实现父子组件通信的示例：

<!-- 父组件 -->
<template>
  <child-component :message="message" @update-message="updateMessage"></child-component>
</template>

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

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

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateParentMessage">Update Parent Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    updateParentMessage() {
      this.$emit('update-message', 'Hello from child!')
    }
  }
}
</script>

在这个示例中，父组件通过emit函数向子组件传递了一个名为message的数据，子组件通过props函数接收了这个数据。当子组件中的按钮被点击时，子组件通过emit函数向父组件传递了一个新的message数据，父组件通过on函数监听了这个数据，并在接收到数据后更新了message的值。

优势一览

使用setup语法糖实现父子组件通信具有以下优势：

代码更简洁： 无需props和events的繁琐代码。
更易理解： 语法直观易懂，符合代码直觉。
高度灵活： 支持各种父子组件通信场景。

常见问题解答

问：什么是setup语法糖？
答：一种新的语法，简化了Vue组件中的逻辑组织和数据处理。
问：如何使用emit函数向父组件传递数据？
答：在子组件的methods中使用this.$emit('event-name', data)，其中'event-name'是自定义事件名称，data是要传递的数据。
问：如何使用props函数接收父组件传递的数据？
答：在子组件的props选项中定义要接收的数据，例如：props: ['message']。
问：setup语法糖是否取代了props和events？
答：否，它是一种替代方案，提供了一种更简洁和灵活的方式来实现父子组件通信。
问：setup语法糖在哪些场景下更适合使用？
答：在需要动态和灵活的父子组件通信时，setup语法糖是一个很好的选择，例如需要双向通信或复杂的事件处理时。