Vue祖传父正常，父传子踩坑

踩坑现象：父传子，子传孙。父传子使用props正常，子传孙使用props却提示未定义。

终究原因：

 1 <script>
 2 import *****
 3 
 4 export default {
 5   props: {
 6     message: {
 7       type: String,
 8       default: null
 9     }
10   },
11   mounted() {
12     console.log(this.message) // 控制台中，这个message始终报错Property or method "message" is not defined on the instance but referenced during render.13     // 即便父组件中未绑定message的值，此处也应该显示null
14   },
15   
16   data() {
17     return {
18     }  19   } 
20 }21 </script> // 这段代码是拷贝过来的，但结束标签没有拷贝过来，真想给自己两耳光，浪费半天时间，父传子props检查看了N遍22 

简单描述踩坑过程：

写一个项目的一个页面，涉及到弹窗，将页面作为父组件，弹窗作为子组件，而这个弹窗中还有较多的弹窗处理，如果将这些弹窗都写到子组件（弹窗）中，势必内容很多，不适合于维护、开发。于是，将这些更多的弹窗从子组件中剥离出来，分解成多个单vue文件作为孙组件，在子组件中引用。

剥离开始之前，子组件中使用props申明状态，父组件绑定值，正常拿到了值。

剥离开始后，通过同样的方式，孙组件中使用props申明了其它状态，子组件中绑定值，运行项目时，却提示Property or method "message" is not defined on the instance but referenced during render.

由于刚接触vue不久，很多知识都没有摸清，甚至怀疑因为加入了孙组件，会不会有一些特殊设置，然后就是漫长的怀疑人生，百度。最后花了半天时间检查到是因为自己的疏忽，少写了</script>。

归根到底，还是基础太薄弱。

标签：祖传,Vue,绑定,父传子,props,组件,message,弹窗
来源： https://www.cnblogs.com/agetoage/p/15640574.html