vue3子组件向父组件传参

《好记性不如烂笔头系列》

子组件

<template>
  <div class="protocolstyle">
    <van-checkbox v-model="checked" toggle @click="userProtocolClick"></van-checkbox>
    <span class="marginL5">测试数据</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

/**
 * 数据部分
 */
const checked = ref(false);
// 定义emits事件
const emits = defineEmits(['getCheckboxStatus']);
// emits事件传参
const userProtocolClick = () => {
  emits('getCheckboxStatus', checked.value);
};
</script>

<style lang="scss" scoped>
.protocolstyle {
  line-height: 20px;
  display: flex;
  justify-content: center;
  font-size: 12px;
  .protocol-style-1 {
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #5e58f6;
  }
}
</style>

父组件引用子组件

<template>
  <div>
    <component :is="XXX" class="marginB20" @getCheckboxStatus="getCheckboxStatus"></component>
  </div>
</template>

<script lang="ts" setup>
import XXX from '@/xxx.vue';

// 子组件传值
const userProtocolCheckboxStatus = ref(false);
const getCheckboxStatus = (e: any) => {
  userProtocolCheckboxStatus.value = e;
};
</script>