废话不多说直接上问题,这是最近项目上遇到的一个关于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>
父组件