【Vue3进阶】组件通信进阶使用方法——defineProps、defineExpose、defineEmits

组件通信

父传子

defineProps

在 Vue 3 中，defineProps 是一个用于在 <script setup> 语法中定义组件的 props 的函数。这个函数提供了一种更加明确和类型安全的方式来定义子组件的 props，使得子父组件之间的数据传递更加清晰和可维护。以下是 defineProps 的基本使用方式：

基本用法：

1. 导入 defineProps 函数：
   首先，你需要从 vue 包中导入 defineProps 函数。

   import { defineProps } from 'vue';
   

2. 使用 defineProps 定义 Props：
   在 <script setup> 中，使用 defineProps 来定义你的组件 props。你可以传递一个对象，对象的属性就是你想要定义的 props，以及它们的类型和验证器。

   <script setup>
   import { defineProps } from 'vue';
   const props = defineProps({
     title: String,
     message: {
       type: String,
       default: ''
     },
     count: {
       type: Number,
       required: true
     }
   });
   </script>
   

   在这个例子中，title 是一个字符串类型的 prop，message 是一个带有默认值的字符串类型的 prop，而 count 是一个必需的数字类型的 prop。

3. 在模板中使用 Props：
   定义了 props 之后，你可以在组件的模板中像使用数据一样使用它们。

   <template>
     <div>
       <h1>{{ title }}</h1>
       <p>{{ message }}</p>
       <button @click="count++">Count is: {{ count }}</button>
     </div>
   </template>
   

子传父

ref+defineExpose

采用setup模式

在 Vue 3 中，setup 函数是 Composition API 的入口点。它在组件创建之前执行，并且接收两个参数：props 和 context。setup 函数可以返回一个对象，其中的属性和方法将会被暴露给模板或其他 Composition API 函数。

子组件：

父组件：

方法：

1. 通过在父组件中去定义ref变量
   
2. 然后子组件做一个主动暴露
   
3. 父组件通过.value.方法()的方式拿到子组件提供的方法
   
4. 然后在父组件中就会执行子组件的方法
   

采用export default模式

在 Vue 2 中，我们通常使用 export default 来定义组件。在 Vue 3 中，虽然 setup 函数是推荐的写法，但仍然可以通过 export default 来定义组件，并且使用 Composition API。

子组件：

父组件：

总结

• setup 模式：推荐使用，更符合 Vue 3 的设计理念。通过 defineExpose 明确地控制哪些属性和方法被暴露给父组件或子组件。
• export default 模式：兼容 Vue 2 的写法，可以使用 this.$expose 来暴露方法，但不是最佳实践。

在实际开发中，推荐使用 setup 模式，因为它提供了更好的类型推断和更清晰的代码结构。

defineEmits

如果你想要实现子组件向父组件传递数据或事件，你应该使用 defineEmits。以下是 defineEmits 的基本用法：

1. 导入 defineEmits 函数：

   import { defineEmits } from 'vue';
   

2. 使用 defineEmits 定义 emits：
   在 <script setup> 中，使用 defineEmits 来定义你的组件可以触发的事件。

   <script setup>
   import { defineEmits } from 'vue';
   const emit = defineEmits(['update', 'click']);
   </script>
   

3. 触发事件：
   在子组件中，你可以使用 emit 函数来触发定义的事件，并向父组件传递数据。

   <script setup>
   import { defineEmits } from 'vue';
   const emit = defineEmits(['update', 'click']);
   
   function someMethod() {
     emit('update', newValue);
   }
   </script>
   

4. 在父组件中监听事件：
   父组件可以通过 v-on 或 @ 语法来监听子组件触发的事件。

   <template>
     <ChildComponent @update="handleUpdate" @click="handleClick" />
   </template>
   

这样，当子组件触发 update 或 click 事件时，父组件的相应方法会被调用，并且可以接收子组件传递的数据。这是 Vue 中实现父子组件通信的一种方式。

defineExpose和defineEmits的区别

1. defineExpose：
   • defineExpose用于在<script setup>语法糖的组件中明确要暴露出去的属性和方法，使得父组件可以通过ref访问子组件的这些属性和方法。
   • 它通常用在子组件中，将子组件中的属性或方法暴露给父组件。父组件可以通过ref获取子组件实例，并直接访问这些暴露的属性和方法。
   • defineExpose必须在变量和方法声明定义之后使用，否则可能会引起警告甚至页面卡死。
2. defineEmits：
   • defineEmits用于子组件向父组件传递事件，即子组件可以通过defineEmits声明可以触发的事件，然后在需要的时候触发这些事件，父组件通过监听这些事件来接收数据。
   • 它允许子组件显式地声明要触发的事件，并在子组件中通过emits函数触发这些事件，父组件通过监听这些事件来响应。
   • defineEmits与defineProps一样，只能在<script setup>中使用，并且不需要导入即可使用。

总结来说，defineExpose主要用于子组件向父组件暴露属性和方法，而defineEmits主要用于子组件向父组件传递事件。两者都是Vue 3中组件间通信的重要工具，但它们的使用场景和目的有所不同。

原文地址：https://blog.csdn.net/qq_65034569/article/details/144341926

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！