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

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传参，可写可不写，如果你的业务需要并非这样，就需要考虑这个可能了！

有什么见解，可留言讨论！