起因
最近在重构公司之前的一些vue项目。因为是用于webview的页面的，之前vue页面加载太慢，用户体验感太差了，所以最终选择让我用NUXE.js去重构。我本人也是第一次使用nuxt，所以难免要踩坑，这没得说，也在磕磕绊绊中进行着。
重构的话，其实因为nuxt本身就是基于vue的，所以很多东西是可以直接套用的。比如页面跳转时领导让加的音效，之前的项目是直接在vue的app写的audio标签，这样在不同页面中跳转切换的时候就响起了。那没的说，新的nuxt项目也这样搞呗，省事。
问题来了
按照我的理解，nuxt内的layouts/default页面就等同于vue内的app.vue，那layouts/default内的<NUXt />等于app.vue内的<router-view />，最后nuxt的pages/index就等于vue的view/index。
在vue中跳转时在view/index调用app.vue内的audio相应的事件就只需要this.$parent.xxx。所以nuxt项目中我也是直接这样写的，不出意外的出了意外
用this.$parent.xxx之后报错,#TypeError: Cannot read properties of undefined(reading 'play')，this.$parent.xxx属于未定义元素，奇了怪了
分析
试着在网上搜索下前辈们的经验，失败了,没看到原因。再之后挠掉一把头发后都要开始怀疑是不是nuxt不给我用$parent这么离谱的想法后突然暗骂一声s*，都不会先看下log日志吗。
先log下this.$parent看到
`
好像有戏，等等，这个nuxt莫非是？然后有赶紧log下this.$parent.$parent
`
结果
结果就显而易见了,原来在这nuxt中，layouts/default与pages/index并不像vue中app.vue与pages/index一样是父子关系，它们居然是爷孙，中间的<NUXt/>打死我也没想到居然是传宗接代的二代,真是调皮。所以想要和vue一样实现在pages/index调用layouts/default的方法要写成this.$parent.$parent。
