vue3中父组件与子组件的通信传值

一、父组件给子组件传值

父组件中：

<div style="width: 400px; overflow: auto; height: calc(100vh - 60px)">
    <BoxCard bTitle="动态" bHeight="90vh"></BoxCard>
</div>

子组件中：

<template>
  <div class="boxCard" :style="`height:${bHeight}`">
    <div class="boxCard-i">
      <div class="boxCard-i-title">{{ bTitle }}</div>
      <div class="line-bottom-blue"></div>
      <div class="line-bottom">
        <div class="line"></div>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'box-card' });
defineProps({
  bTitle: {
    type: String,
  },
  bHeight: {
    type: String, // 传参类型
    default: () => {
      return '700px';
    },// 传参默认值
  },
});
</script>

 二、子组件给父组件传值

父组件中：

// template 中
 
<childrenCom  @search-data="searchData" />   // 子组件
 
 
 
// methond 中
const searchData = (val) => {
  console.log(val)   // 获取到的子组件的值
}

 子组件中：

let value1 = '传值1'
let value2 = '传值2'

const emit = defineEmits(['searchData'])

const submit = () => {
    emit('searchData', [value1, value2])  // 子组件将值传递给父组件
}