Advertisement

vue3+ts+vite项目三种形式父子组件的两种设置方式与两种传值方式

阅读量:

直接进入主题,提出问题。这是近期项目中遇到的一个关于definedProps与context传值方式的疑问,本文仅作为记录,欢迎各位专家给予指导。

在Vue3中,setup函数提供了一种更为简化的写法,即所谓的语法糖。

首先介绍在常规的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 =>{

全部评论 (0)

还没有任何评论哟~