vue3+ts+vite项目三种形式父子组件传值的方法(setup(){}、script-setup语法糖、provide和inject)

废话不多说直接上问题,这是最近项目上遇到的一个关于definedProps和context传值的方法,文章仅作记录,欢迎大佬指点。

在vue3中setup有一种简洁式写法Vue3的语法糖

先来说说在常规的setup(){}中怎么去父子传值吧,最近这个项目踩了个坑,没有注意到使用的是setup(){}写法直接去使用了definedProps和definedEmits导致程序一直报错最后也是细心检查找到了问题所在,setup(){}中使用的是context,而

1.setup(){}子传父

子组件

<template>
  //在vue3中可以不存在跟标签
   <el-button @click="handelClick(something)">子组件</el-button>
</template>

<script lang='ts'>
import { ElButton } from 'element-plus'
export default{
    setup(props,context){
        const handelClick = (something:any):void =>{
                /*使用context去定义一个函数第一个参数是自定义函数名,第二个参数是要传递的参数*/
                context.emit('getSomething',something)
                }
        return{
            handelClick
             }
    }
}
</script>

父组件

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值