在 Vue 3 中,props 是用于父组件向子组件传递数据的一种机制

以下是如何在 Vue 3 的 Composition API 中使用 props 的步骤:

  1. 定义组件并声明 props

首先,你需要在子组件中声明 props。这可以通过在组件的 <script> 标签内使用 defineProps 函数来完成。

html 复制代码
<template>  
  <div>  
    {{ message }}  
  </div>  
</template>  
  
<script setup>  
import { defineProps } from 'vue';  
  
const props = defineProps({  
  message: {  
    type: String,  
    required: true,  
    default: 'Hello from props!'  
  }  
});  
</script>

在这个例子中,我们定义了一个名为 messageprop,并指定了它的类型为 String。我们还设置了 required 属性为 true,表示这个 prop 是必须的,并为其提供了一个默认值 'Hello from props!'

  1. 在父组件中使用子组件并传递 props

接下来,在父组件中,你可以像平常一样使用子组件,并通过属性 (attributes) 的方式传递 props

html 复制代码
<template>  
  <ChildComponent :message="parentMessage" />  
</template>  
  
<script setup>  
import { ref } from 'vue';  
import ChildComponent from './ChildComponent.vue';  
  
const parentMessage = ref('Hello from parent!');  
</script>
  1. 在子组件中使用 props

在子组件的 setup 函数中,通过 defineProps 定义的 props 可以直接作为变量使用。在我们的例子中,message prop 可以在模板中直接通过 {``{ message }} 访问,也可以在 setup 函数内的其他逻辑中使用。

确保你已经安装了 Vue 3,并且你的项目配置正确地支持了 Vue 3 的 Composition API 和 <script setup> 语法。<script setup> 是 Vue 3 的一个新特性,它允许你在 <script> 标签内直接编写 Composition API 的代码,而无需显式地导出任何东西。这大大简化了组件的编写过程。

相关推荐
weixin-a153003083166 分钟前
vue疑难解答
前端·javascript·vue.js
Bellafu6663 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird6 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者7 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强7 小时前
Chrome和IE获取本机ip地址
前端
天***88967 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*7 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v7 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls7 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友7 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全