defineProps传参（父传子）

父元素传递给子元素的数据，子元素使用defineProps进行接收

 //父元素
<template>
  <div class="box">
    <!-- 子组件引用 -->
   <v-child msg='我给子元素带的一段话'></v-child>
  </div>
</template>
//子元素
<template>
    <div class="child">
        我是子组件
    </div>
</template>
<script setup>
import {defineProps} from 'vue'
// 在接收时候也得注意，vue3 props接收必须规定数据类型，如果父元素数据类型出错，那么会报错
const props = defineProps({msg:String})
console.log(props); //  Proxy {msg: '我给子元素带的一段话'}
console.log(props.msg)
</script>

posted @ 2023-03-27 16:39 Felix_Openmind 阅读(271) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· defineEmits传值（子传父）

· Vue中父组件读取或操作子组件数据的方法

· Vue3 父传子 props

· 前端学习-vue视频学习009-defineProps(子组件接收父组件的数据)

· vue3 父组件【属性】传值给子组件【props】接收

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

2025年3月

日

一

二

三

四

五

六

Felix_Openmind

https://github.com/serendipitywzz

defineProps传参（父传子）

最新随笔

随笔分类 (404)

随笔档案 (410)

文章分类 (66)

文章档案 (99)

软件开发

阅读排行榜

	//父元素
	<template>
	<div class="box">
	<!-- 子组件引用 -->
	<v-child msg='我给子元素带的一段话'></v-child>
	</div>
	</template>


	//子元素
	<template>
	<div class="child">
	我是子组件
	</div>
	</template>
	<script setup>
	import {defineProps} from 'vue'
	// 在接收时候也得注意，vue3 props接收必须规定数据类型，如果父元素数据类型出错，那么会报错
	const props = defineProps({msg:String})
	console.log(props); // Proxy {msg: '我给子元素带的一段话'}
	console.log(props.msg)
	</script>