Vue学习：16-组件之数据传递（子传父）

有的时候，父组件在使用子组件时，子组件如何给父组件传值呢？分为以下三步进行：

1. 子组件声明自定义的事件

2. 子组件中触发自定义事件（可传值）

3. 父组件使用子组件时监听对应的自定义事件，并执行父组件中的函数（获取子组件传递的值）

一、【子组件】声明组件事件

1. 在选项式 API 中，子组件可通过emits选项来声明自定义的事件

2. 在组合式 API 中，子组件可通过defineEmits()宏来声明自定义的事件

（一）字符串数组式声明自定义事件

采用字符串数组可以声明简单的自定义事件

<script setup>

    defineEmits(['inFocus', 'submit'])

</script>

（二）对象式声明自定义事件

采用对象式声明自定义事件，还可以进行校验传递的参数是否符合预期要求

对象式声明自定义事件中，属性名为自定义事件名，属性值则是是否验证传递的参数：

1、属性值为null，则不需要验证

2、属性值为函数时，参数为传递的数据，函数返回true则验证通过，返回false则验证失败，验证失败可以用警告语句提示开发者【注意：无论是true还是false都会继续执行下去的，父组件都会获取到传递的值】

<script setup>
    
defineEmits({
    autoEvent1: null, // 无需校验
    // 需要校验，param 可以是多个参数，返回布尔值来表明事件是否合法
    autoEvent2: (param) => {
        // true 则通过
        // false 则不通过，可以在控制台输入警告语句
    }
})
    
</script>

二、【子组件】触发组件事件

在选项式 API 中，可通过组件当前实例this.$emit(event, ...args)来触发当前组件自定义的事件

在组合式 API 中，可调用defineEmits宏返回的emit(event, ...args)函数来触发当前组件自定义的事件

其中上方两个参数分别为：

● event：触发事件名，字符串类型

● ...args：传递参数，可没有，可多个

Button.vue

<script setup>

// 自定义事件，并返回 emit 函数
const emit = defineEmits(['changeAge'])

function emitAgeEvent() {
    // 触发自定义事件 changeAge，并传递参数 1，20
    emit('changeAge', 1, 20)
}
</script>

<template>
    <button @click="emitAgeEvent">触发自定义事件</button>
    <hr>
    <!-- 触发自定义事件 changeAge，并传递参数 30 -->
    <button @click="emit('changeAge', 30)">触发自定义事件</button>
</template>

三、【父组件】监听子组件自定义事件

使用v-on:event="callback"或者@event="callback"来监听子组件是否触发了该事件

1、event：事件名字（camelCase 形式命名的事件，在父组件中可以使用kebab-case形式来监听）

2、callback：回调函数，如果子组件触发该事件，那么在父组件中执行对应的回调函数，回调函数声明参数可自动接收到触发事件传来的值

App.vue

<script setup>
import { ref } from 'vue';

import ButtonVue from './components/Button.vue';

let startAge = ref(0)
let endAge = ref(0)

// 子组件触发事件的回调函数
function addAge(start_age, end_age) {
    console.log('----------------');
    console.log(start_age)
    console.log(end_age)
    startAge.value = start_age
    endAge.value = end_age
}
</script>

<template>
    <h3>
        开始年龄：{{ startAge }}
    </h3>
    <h3>
        结束年龄：{{ endAge }}
    </h3>
    
    <!-- 使用引入的组件，并通过属性传递数据 -->
    <ButtonVue @change-age="addAge" />
</template>