vue3 父子组件传值

**

## 父组件

**
 <child-item :title="btnText" @changeAge="changeAge">
      <template #header> 这是头部 </template>
      <div>这是默认内容</div>
      <template #left>这是左边内容</template>
      <template #right>这是右边内容</template>
    </child-item>

function changeAge(e, c) {
  console.log(e);
  console.log(c);
}

const btnText = ref("这是标题111");


**

## 子组件

**
//defineEmits 必须要写
<script setup lang="ts">
//defineProps  接收父组件传的值
let propsData = defineProps({
  title: {
    type: String,
    required: true,
  },
});
// 子组件给父组件传值
const emit = defineEmits(["changeAge"]);
function changeValue() {
  emit("changeAge", 1, 20);
}
</script>
<template>
  <div>{{ propsData.title }}</div>
  <div style="background-color: #8c939d; color: #ffffff">
    <slot name="header"></slot>
  </div>
  <div style="display: flex; justify-content: space-between">
    <slot name="left"></slot>
    <slot></slot>
    <slot name="right"></slot>
  </div>
  <div @click="changeValue">点击给父组件传值</div>
</template>

<style scoped lang="scss"></style>