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

最新推荐文章于 2025-02-21 11:21:34 发布

海豹先生_

最新推荐文章于 2025-02-21 11:21:34 发布

阅读量782

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_57956183/article/details/132475313

版权

该博客主要介绍了Vue中父子组件传值的相关内容，包含父组件给子组件传值以及子组件给父组件传值，分别阐述了在父组件和子组件中的操作情况。

摘要由CSDN通过智能技术生成

一、父组件给子组件传值

父组件中：

<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])  // 子组件将值传递给父组件
}