vue+typeScript中父组件向子组件传参时prop的使用

最近新的Vue项目中添加了typeScript,作为完全一窍不通的我只能做一点,记下一点笔记,方便自己复习接触到的知识点。

我主要涉及到的是vue-propperty-decorator Prop 修饰器。

业务逻辑介绍

需要在主页面点击一行表格数据,然后获取到其中的一个参数(类型为字符串),传递给子组件,子组件接收后,使用这个参数发起ajax请求,获取到的数据渲染到弹窗中。

逻辑思路

我首先想到的就是,父组件向子组件传参,子组件需要使用prop这个属性来接收,那么查询文档,Vue Property Decorator提供了7个装饰器(@Emit、@Inject、@Model、@Prop、@Provide、@Watch、@Component),这里我先想到的就是@Prop,使用这个装饰器来先定义参数的类型和默认值等

@Prop({type:String,required:true,default:''}) testParams!:string //定义参数

但是在我定义好了这个变量之后,点击保存,编译时,便一直报错:Property or method XXX is not defined on ths instance but referenced ... 百思不得其解,而且刷新主页面是没问题的,调试发现选中一条数据后点击按钮修改dialog的 visiable.sync对应的变量也是成功的,也不报错,但是dialog就是不显示,后来便百度了这个报错,在扛狼1427的博客里面看到了关于这个问题的详细介绍,基于先从简单方法开始的习惯,先使用了第二个情况的介绍:因为没有对组件中写 @Component()装饰器,导致的报错。,于是便引入了Component,并在代码中添加上,之后重新刷新页面就发现页面不再报错了,编译成功,问题解决!

还有一种报错的可能,也是比较常见的,就是定义了一个值为undefined的变量,我在定义testParams时,因为我的这个参数是父组件传给子组件的,所以@Prop({type:String,required:true,default:''}) testParams!:string中的default传参,可写可不写,如果你的业务需要并非这样,就需要考虑这个可能了!

有什么见解,可留言讨论!

Logo

前往低代码交流专区

更多推荐