Vue3.0组合式API：使用defineEmits()实现子组件向父组件传递数据

news2024/9/20 8:03:18

1、使用 defineEmits() 函数

父组件通过使用 Prop 为子组件传递数据，但如果子组件要把数据传递回去，就需要使用自定义事件来实现。父组件可以通过 v-on 指令（简写形式“@”）监听子组件实例的自定义事件，而子组件可以通过调用内建的 defineEmits() 函数并传入事件名称来触发自定义事件。

使用 <script setup> 语法糖，<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return，template 便可直接使用。相比于普通的 <script> 语法，它具有更多优势。

Vue3.0组合式API，组件之间的数据传递：

父传子：使用 defineProps() 函数。

子传父：使用 defineEmits() 函数。

为了在声明 props 和 emits 选项时获得完整的类型推导支持，我们可以使用 defineProps() 函数和 defineEmits() 函数 API，它们将自动地在 <script setup> 中可用：

<script setup>
//父传子
const props = defineProps({
  foo: String
})

//子传父
const emit = defineEmits(['change', 'delete'])
// setup 代码
</script>

defineProps() 函数和 defineEmits() 函数都是只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。
defineProps() 函数接收与 props 选项相同的值，defineEmits() 函数接收与 emits 选项相同的值。
defineProps() 函数和 defineEmits() 函数在选项传入后，会提供恰当的类型推导。
传入到 defineProps() 函数和 defineEmits() 函数的选项会从 setup 中提升到模块的作用域。因此，传入的选项不能引用在 setup 作用域中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块作用域内。

defineEmits() 函数的语法格式如下：

defineEmits( eventName, […args] )

参数说明：

eventName：传入事件的名称。

[…args]：触发事件传递的参数，该参数是非必选。

【实例】在 <script setup> 语法糖中，使用 defineEmits() 函数，实现子组件向父组件传递数据。

（1）创建 ParentComponent.vue 父组件

<template>
    <fieldset>
        <legend>父组件</legend>
        <h3>父组件接收到子组件传递的数据：</h3>
        <p>博客信息：{{ blogInfo.blogName }}</p>
        <p>博客信息：{{ blogInfo.blogUrl }}</p>

        <!-- 使用组件 -->
        <ChildComponent @receiverData="getBlogInfo" />
    </fieldset>
</template>

<!-- 使用 <script setup> 语法糖 -->
<script setup>
import { reactive } from 'vue';

//引用组件，使用 <script setup> 语法糖引用的组件会自动执行注册
import ChildComponent from '@/components/ChildComponent.vue'

// 使用 reactive 创建响应式的对象
const blogInfo = reactive({});

// 核心代码：接收子组件传递数据的方法
function getBlogInfo(blogName, blogUrl) {
    blogInfo.blogName = blogName;
    blogInfo.blogUrl = blogUrl;
}

</script>

（2）创建 ChildComponent.vue 子组件

<template>
    <fieldset>
        <legend>子组件</legend>
        <button @click="sendData">传递数据给父组件</button>
    </fieldset>
</template>

<!-- 使用 <script setup> 语法糖 -->
<script setup>
import { reactive } from 'vue';

// 使用 reactive 创建响应式的对象
const blogInfo = reactive({
    blogName: '您好，欢迎访问 pan_junbiao的博客',
    blogUrl: 'https://blog.csdn.net/pan_junbiao'
});

//核心代码
const emit = defineEmits(['receiverData']);

function sendData() {
    //核心代码：触发自定义事件，传递数据个父组件
    emit('receiverData', blogInfo.blogName, blogInfo.blogUrl);
}

</script>

（3）在 App.vue 根组件中，引入父组件

<template>
  <!-- 使用组件 -->
  <ParentComponent />
</template>
 
<script setup>
//引用组件，使用 <script setup> 语法糖引用的组件会自动执行注册
import ParentComponent from '@/components/ParentComponent.vue';

</script>

执行结果：

2、组件事件配合 v-model 指令

如果是在子组件中用户输入数据，我们希望在获取数据的同时发生数据给父组件，这是可以配合 v-model 指令使用。

【实例】子组件中用户输入数据，在父组件中实时获取数据。

（1）修改 ParentComponent.vue 父组件

<template>
    <fieldset>
        <legend>父组件</legend>

        <!-- 使用组件 -->
        <ChildComponent @searchEvent="getSearch" />

        <h3>父组件接收到子组件传递的数据：</h3>
        接收到的搜索关键字：<input type="text" v-model="search" />
    </fieldset>
</template>

<!-- 使用 <script setup> 语法糖 -->
<script setup>
import { ref } from 'vue';

//引用组件，使用 <script setup> 语法糖引用的组件会自动执行注册
import ChildComponent from '@/components/ChildComponent.vue'

// 使用 ref 创建响应式的对象
const search = ref('');

// 核心代码：接收子组件传递数据的方法
function getSearch(keyword) {
    search.value = keyword;
}

</script>

<style>
input {
    width: 300px;
    padding: 3px;
    font-size: 16px;
}
</style>

（2）修改 ChildComponent.vue 子组件

<template>
    <fieldset>
        <legend>子组件</legend>
        搜索：<input type="text" v-model="search" />
    </fieldset>
</template>

<!-- 使用 <script setup> 语法糖 -->
<script setup>
import { ref, watch } from 'vue';

// 使用 ref 创建响应式的对象
const search = ref('');

//核心代码
const emit = defineEmits(['searchEvent']);

//watch监听器
watch(search, (newValue, oldValue) => {
    //核心代码：触发自定义事件，传递数据个父组件
    emit('searchEvent', newValue);
});

</script>

执行结果：