Vue3 父子组件传值

最新推荐文章于 2025-06-25 16:23:36 发布

weixin_58573720

最新推荐文章于 2025-06-25 16:23:36 发布

阅读量299

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_58573720/article/details/142725507

defineprops

父组件

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import { ref } from "vue";
const count = ref(1000);
setTimeout(() => {
  count.value = 200;
}, 2000);
</script>

<template>
  <!-- 父子组件传值，父传子 -->
  <!-- 子组件 -->
  <HelloWorld message="你好，我是父亲给你传的消息" :count="count"></HelloWorld>
</template>

子组件

// 父子组件传值，接受参数
 defineProps({
   message: String,
 });
const prost = defineProps({
  message: String,
  count: Number,
});
</script>
<template>
  <div>父传子传过来的数据{{ message }}</div>
  <div>{{ prost }}</div>
  <div>响应式数据传递------{{ prost.count }}</div>
</template>