Vue--父子组件传参详细代码

最新推荐文章于 2024-11-03 19:51:25 发布

Z_BL

最新推荐文章于 2024-11-03 19:51:25 发布

阅读量206

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Z_B_L/article/details/137695796

版权

本文介绍了在Vue应用中创建一个简单的父子组件结构，通过`ref`在父组件传递数据到子组件，以及如何在子组件中通过`props`接收并显示父组件的数据。

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

建一个 FatherComponent.vue

<!-- 父组件 -->
<template>
  <ChildComponent :parentData="parentData" />
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentData = ref('父组件数据');
</script>

一个ChildComponent.vue文件

<!-- 子组件 -->
<template>
  <div>{{ parentData }}</div>
</template>
 
<script setup>
import { defineProps } from 'vue';
 
const props = defineProps({
  parentData: String
});
</script>

以上就是父子组件传参得方法