在小做小程序的项目中,遇到了多组件 嵌套的事情,爷-》子-》孙,遇到这种事情,网站找了好多解决方案,先用了网上的 嵌套案例:
我把这个实例分为几个步骤解读:
1、父组件的button元素绑定click事件,该事件指向notify方法
2、给子组件注册一个ref=“child”
3、父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg
4、子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中
父组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
子组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
尝试了上面这种方法,只用了两层比较合适,到第三层不知道哪里问题,报错:
最后还是没解决了这个问题,最后就是在中间(子)组件中,用了刷新整个页面的方法,具体逻辑代码如下:
vue项目实现重新加载本页面
App.vue:
<tempalte> <router-view v-if="isRouterAlive" /> </tempalte> export default defineComponent({ provide () { return { reload: this.reload } } data () { retrun { isRouterAlive: true } }, methods: { reload () { this.isRouterAlive = false this.$nextTick(() => { this.isRouterAlive = true }) } } })
页面使用:
<el-button @click="reload">刷新页面</el-button> export default { inject: ['reload'] }