vue3基础之setup中的props和自定义事件

最新推荐文章于 2024-08-14 14:06:32 发布
最新推荐文章于 2024-08-14 14:06:32 发布
阅读量1.6k 收藏
点赞数
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64740434/article/details/132006660
版权
本文介绍了在Vue3的setup函数中，如何使用defineProps来接收props，包括直接接收和通过接口定义类型的方式。同时，详细讲解了利用defineEmits处理自定义事件，以及emit方法的使用。
摘要由CSDN通过智能技术生成

setup中的props接收

  • 方法1：
    • 使用setup中默认存在的 defineProps方法接收props
    • definePorps的参数是一个数组，可以直接接收多个props
    • definePorps的返回值是所有接收的props组成的proxy对象
    • 但是这种接收是直接接收，不限制类型
  • 方法2：
    • 还是使用setup中默认存在的defineProps方法接收props
    • defineProps方法接收一个泛型，泛型是一个接口，接口中书写我们要接收的props的名称和他对应的类型
    • 不需要向defineProps的参数传递任何值，内部直接帮我们完成引入
    • definePorps的返回值是所有接收的props组成的proxy对象

setup中接收自定义事件

  • 使用setup中默认存在的defineEmits方法接受自定义事件
  • 我们在defineEmits的泛型中书写接口来接受自定义事件
  • 接口中每接收一个自定义事件,都是函数类型,参数固定第一个值event值是自定义事件名称,后边参数都是自定义事件接收的参数,这个函数类型返回值一般都是void
  • defineEmits返回一个emit方法,方便我们调用自定义事件
  • 也可以在模板中直接使用 组件实例上的 $emit 调用
 勿忘初心
关注
vue3中setup函数以及setup语法糖父子组件传参
m0_74213811的博客
04-25 2512
vue3中两种setup的父子组件传值
vue的setup函数
qq_42309685的博客
08-13 1万+
组合式API（setup） 作用：将同一逻辑关注点代码收集 setup 使用 setup 函数时，它将接受两个参数 props context Props props 是 setup 函数中的第一个参数，props 是用 Proxy 包裹的一个响应式数据，当传入新的 props时，它将被更新。 需要注意的是：因为 props 是响应式的，不能使用 ES6 结构，因为解构会消除 props 的响应性。 如果需要解构 props，可以在 setup 函数中使用 toRef 函数来完成此操作： i
vue编译后setup中props变量声明提升
最新发布
xiaoxiongwa的博客
08-14 420
vue/compiler-sfc 具备两大能力，一个是 parse，一个是 compile。涉及到三个部分，template、script、style，分别表示模版、脚本、样式三块内容。
vue3 setup 组合式api props父子组件传值详解
dxh9231028的博客
06-26 6925
这样做可以直接使用data和data2，无需props.data,但有一个致命的缺陷，数据会失去响应式，所以结构时，需要用torefs包裹，因为props本质上时reactive对象，torefs可以把reactive的每个对象变成ref对象，这样结构出来依旧是响应式。细节方面（基本没用，感兴趣可以看看）========================================================================当父组件传给子组件是响应式对象，那么此数据是原数据的。
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通过defineProps获取props为null
qq_38196449的博客
05-08 490
其实原因很简单，defineProps只在setup语法糖中好使，也就是的方式
【vue3】vue3 setup如何使用props？
热门推荐
qq_39576711的博客
03-18 6万+
setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。 他接受两个参数： {Data} props {SetupContext} context 在setup里边，第一个参数就是props，下面来看示例。 子组件propsTest.vue： <script lang="ts"> import { toRefs } from 'vue' interface Data { [key:string]:unknown } export defaul
Vue3中setup()函数收到的两个比较重要的值：props和context（和自定义事件有关）
ChuanyangChen的博客
05-26 2001
Vue3中setup()函数收到的两个比较重要的值 setup()函数能接收到两个形参，一个是props，另外一个是context。props即父组件传递给子组件的参数，context意思是上下文，里面有一个emit('事件名', 事件回调函数收到的值)函数比较常用，可替代vue2绑定在vm身上的this.$emit('事件名', 事件回调函数收到的值); 子组件： <template> <h3>{{person.name}}</h3> <h3>{{p
【JavaScript源代码】Vue3中SetUp函数的参数props、context详解.docx
12-29
Vue3中的`setup`函数是Composition API的核心部分，它允许开发者在组件的生命周期早期定义状态、响应式属性和方法。这个函数接收两个参数：`props`和`context`。 1. **props**： - `props`是一个对象，用于接收父...
在vue3+ts+setup语法糖中使用图片预览组件
09-14
在Vue3中，开发人员可以利用TypeScript(简称ts)的强类型特性和新的`setup`语法糖来构建更加安全和高效的应用。本教程将详细讲解如何在Vue3项目中结合TypeScript和`setup`语法糖实现图片预览功能。 首先，让我们了解...
【vue3 ＜script setup＞ props 使用与讲解】defineProps、withDefaults 类型限制、默认值设置
m0_67401228的博客
03-06 9809
本章主要涉及api内容：defineProps、withDefaults； defineProps 只能是要么使用`运行时声明`，要么使用`类型声明`。同时使用两种声明方式会导致编译报错。； defineProps、withDefaults 是只在 例子1 > 运行时声明 的方式只能设置参数类型、默认值、是否必传、自定义验证。报错为控制台warn警告。 若想设置[ 编辑器报错、编辑器语法提示 ]则需要使用类型声明的方式。 <script lang='ts' setup> c..
Vue3通透教程【十八】TS为组件的props标注类型
官方推荐
07-17 4万+
通过TS语法来编写组件的props方法
vue3 setup 语法糖 的 props、emit 练习
m0_66051368的博客
07-22 1万+
父子传参
setup获取props和自定义事件、通过expose暴露给ref获取属性和方法、setup顶层async、setup返回函数
月光晒了很凉快的博客
11-22 4145
< template > < div > < h3 > 我是child组件 -- {{ title }} < button @click = " setTitle " > 修改父title中的数据 < script > export default {// props单向数据流，子不能修改父 // 写法1： // props: ['title'], // 写法2： props : {title : {
vue3 setup语法通过defineProps获取props为null
weixin_45455337的博客
02-21 718
【代码】vue3 setup语法通过defineProps获取props为null。
Vue3之setup参数介绍
老电影故事的博客
04-27 4507
正如在一个标准组件中所期望的那样，setup函数中的props是响应式的，当传入新的prop时，它将被更新。，所以setup()内部的this的行为与其他选项中的this完全不同。用途：当父组件传递数据给子组件时，子组件不通过props接收，那么父组件传递的数据就到了setup中的context的attrs属性。context是一个普通的JavaScript对象，也就是说，它不是响应式的，这意味着你可以安全地对context使用ES6解构。是响应式的，你不能使用ES6解构，因为它会消除prop的响应式。
vue3 在＜script setup＞使用props
weixin_39273589的博客
08-09 1738
在``中，我们可以直接使用`props`来接收父组件传递的属性，而不需要在`props`选项中声明。在上面的例子中，我们使用`defineProps`函数来定义`props`的类型，同时也指定了`message`属性的类型为`String`，并且是必需的。在`setup`函数中，我们可以通过`props`来访问传入的属性，这里我们直接使用`props.message`来输出属性的值。希望这个例子能帮助你理解在Vue3中使用``和`props`的方式。
vue3学习 setup，props，context
weixin_48789376的博客
07-28 8190
setup 函数 1、执行时机在 beforeCreate 和 created这两个钩子函数之前，是最早执行的，在程序运行中，setup函数只执行一次 2、在setup中没有this , 打印返回undefined vue3里的生命周期： ① 可以和vue2里一样选项式写法，和setup平级， beforeCreate/ created/ beforeMount/ mounted / beforeUpdate / updated / beforeUnmount / unmounted ② 可以在setup里
vue3自定义事件写法setup
09-01
在Vue 3中，自定义事件的写法有些不同于Vue 2。下面是Vue 3中自定义事件的常见写法： 1. 使用`$emit`方法触发自定义事件： 在父组件中，可以使用`$emit`方法触发自定义事件，并传递参数。例如： ```vue 点击...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值