其他分享
首页 > 其他分享> > Vue祖传父正常,父传子踩坑

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