vue3 setup 使用props

最新推荐文章于 2025-03-17 10:07:20 发布

爱吃秋刀yu

最新推荐文章于 2025-03-17 10:07:20 发布

阅读量704

点赞数 9

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/pjluoji/article/details/135815655

版权

本文介绍了在Vue.js中，如何在父组件向子组件传递数据（如rowId和text）以及在子组件中接收并处理这些属性的方法，包括使用`props`和`onMounted`钩子函数实现组件间的有效通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了方便下次开发使用，记录一下

父组件

        <EditCommodity :rowId="rowId" text="父组件传来的文本" v-if="editCommodityVisible" @goBack="handleEditCommodityGoback"></EditCommodity>

子组件

接收

defineProps 为内置方法无需引入

let props = defineProps({
        rowId: {
        type: Number,
        default:-1
      },
      text:{
        type: String,
        default:'默认值'
      }
    });

输出

onMounted(()=>{
    console.log(props.rowId,'rowId') // 1
    console.log(props.text,'text') //父组件传来的文本
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱吃秋刀yu

关注关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Web前端 ---- 【Vue3】vue3中的组件传值（props、自定义事件、全局事件总线）

weixin_68854196的博客

01-13

1548

本文介绍了在vue3中的props、自定义事件、全局事件总线的使用

Vue3的Props使用场景

weixin_73060959的博客

08-23

874

如果一个 prop 的名字很长，应使用 camelCase 形式，因为它们是合法的 JavaScript 标识符，可以直接在模板的表达式中使用，也可以避免在作为属性 key 名时必须加上引号。对象形式的 props 声明不仅可以一定程度上作为组件的文档，而且如果其他开发者在使用你的组件时传递了错误的类型，也会在浏览器控制台中抛出警告。对于以对象形式声明的每个属性，key 是 prop 的名称，而值则是该 prop 预期类型的构造函数。选项的值是相同的，两种声明方式背后其实使用的都是 props 选项。

参与评论您还未登录，请先登录后发表或查看评论

【vue3】vue3 setup如何使用props？

最新发布

Freya的博客

03-17

419

vue3中的props详解

vue3 setup 组合式api props父子组件传值详解

dxh9231028的博客

06-26

8760

这样做可以直接使用data和data2，无需props.data,但有一个致命的缺陷，数据会失去响应式，所以结构时，需要用torefs包裹，因为props本质上时reactive对象，torefs可以把reactive的每个对象变成ref对象，这样结构出来依旧是响应式。细节方面（基本没用，感兴趣可以看看）========================================================================当父组件传给子组件是响应式对象，那么此数据是原数据的。

Vue3中使用setup监听props

yang295242361的博客

08-20

969

在Vue 3中，setup函数是 Composition API 的一部分，用于定义组件的逻辑。与传统的选项式 API 相比，setup函数提供了一个更灵活的方式来组织和重用逻辑。当你想在setup函数中监听从父组件传递过来的props时，由于setup函数在组件实例创建之前被调用，因此你不能直接使用watch或watchEffect直接监听props，因为此时props还未被解析为响应式对象。

13.setup.props

qq_34820433的博客

05-04

780

PS：注意，这里不要使用 setup({title})解构，会丢失响应式，props 本身是响应式的；1. 在 setup()函数中，第一个参数可以传递 props，用于组件之间的通信；本节课我们来要了解一下 Vue3.x 中的 setup()下 props 用法；2. 我们可以先创建一个子组件 Child.vue，然后被父组件调用导入；PS：并且，props.title 是只读的，无法通过这个改变；props.title = 'Mr.Lee' // 只读，不可变。

vue3 setup使用props

08-17

在Vue 3的setup函数中，可以使用defineProps来定义props。定义props时需要传入一个对象，对象的属性名是props的名称，属性值是对应的类型。例如，如果想定义一个名为text的props，类型为字符串，可以使用以下语法： ...

vue3 setup标签使用总结

Leisure_Time的博客

05-07

474

引入element-plus 引入vuex 使用props 定义emit事件使用watch监听props computed 计算函数 refs 使用 vue-router使用

【Vue3】配置路由规则props

又言又语

08-19

547

本文介绍 Vue3 路由规则中props配置的用法。路由规则props：用于处理params传参；，函数写法：：处理query传参；：处理params传参。props: {}：对象写法，用于传递固定参数值。

【vue3 ＜script setup＞ props 使用与讲解】defineProps、withDefaults 类型限制、默认值设置

m0_67401228的博客

03-06

9978

本章主要涉及api内容：defineProps、withDefaults； defineProps 只能是要么使用`运行时声明`，要么使用`类型声明`。同时使用两种声明方式会导致编译报错。； defineProps、withDefaults 是只在例子1 > 运行时声明的方式只能设置参数类型、默认值、是否必传、自定义验证。报错为控制台warn警告。若想设置[ 编辑器报错、编辑器语法提示 ]则需要使用类型声明的方式。 <script lang='ts' setup> c..

vue3 在＜script setup＞使用props

weixin_39273589的博客

08-09

1874

在``中，我们可以直接使用`props`来接收父组件传递的属性，而不需要在`props`选项中声明。在上面的例子中，我们使用`defineProps`函数来定义`props`的类型，同时也指定了`message`属性的类型为`String`，并且是必需的。在`setup`函数中，我们可以通过`props`来访问传入的属性，这里我们直接使用`props.message`来输出属性的值。希望这个例子能帮助你理解在Vue3中使用``和`props`的方式。

vue3在 setup 中使用 props

空晓天

11-17

1万+

vue3在 setup 中使用 props 记录学习和开发中遇到的问题之前我尝试在 setup 中使用 props 是这样的 export default defineComponent({ setup(props: any) { console.log(props.id) // 输出 undefined } }) 然而却输出 undefined ，通过思考和查阅资料，与 vue2 做对比，少了 props 声明一步加上声明就可以了 export default

vue3中的setup方法

506陈业洪的博客

07-29

2361

props是一个对象，包含父组件传递给子组件的所有数据。在子组件中使用props进行接收。包含配置声明并传入的所有的属性的对象。也就是说，如果你想通过props的方式输出父组件传递给子组件的值。你需要使用props进行接收配置。即props:{......}。如果你未通过Props进行接受配置，则输出的值是undefined.........

vue3给props设置默认值【defineProps】

qq_45487080的博客

03-30

3万+

vue3.2 defineProps设置默认值

vue3中的setup()函数详解

唯见青山不见君

11-29

1万+

vue3中的setup()函数详解

如何在 Vue 3 中使用使用 `defineProps` 函数在 `setup` 中获取 props

有我更精彩的博客

10-06

1659

在中，使用来定义你的组件 props。你可以传递一个对象，对象的属性就是你想要定义的 props，以及它们的类型和验证器。</script>在上面的例子中，title是一个字符串类型的 prop，message是一个带有默认值的字符串类型的 prop，而count是一个必需的数字类型的 prop。是 Vue 3语法中定义组件 props 的一种简洁而强大的方式来。它不仅提供了类型检查和默认值的功能，还使得组件的 API 声明更加清晰和集中。通过使用。

setup获取props和自定义事件、通过expose暴露给ref获取属性和方法、setup顶层async、setup返回函数

月光晒了很凉快的博客

11-22

4339

< template > < div > < h3 > 我是child组件 -- {{ title }} < button @click = " setTitle " > 修改父title中的数据 < script > export default {// props单向数据流，子不能修改父 // 写法1： // props: ['title'], // 写法2： props : {title : {

Vue3 Composition API - setup

BradyCC的博客

07-29

449