Vue 子组件使用 this.$parent 无法调用父组件中的方法
this.$parent 无法调用父组件中的方法1. 遇到的问题2. 分析3. 解决4. 总结1. 遇到的问题在开发 Vue 项目中,遇到了一个这样的问题:其中UI框架使用的是iview UI , 在子组件中利用 this.$parent.getList() 调用父组件中的 getList() 方法, 发现调用不到该方法, 然后通过 this.$parent.$parent.getList() 就
·
1. 遇到的问题
在开发 Vue
项目中,遇到了一个这样的问题:
其中UI框架使用的是iview UI , 在子组件中利用 this.$parent.getList()
调用父组件中的 getList()
方法, 发 现调用不到该方法, 然后通过 this.$parent.$parent.getList()
就可以调用到
2. 分析
在子组件中打印 this.$parent
,通过控制台的打印,发现打印出来的 this.$parent
并不是该组件的父组件,而是iView UI的组件,原来是我在父组件引用子组件的时候还在外面套了一层 UI 组件导致的
<template>
<Content>
<div>列表</div>
<open-modal></open-modal>
</Content>
</template>
3. 解决
将父组件中的子组件移到 UI 组件外面,测试后发现可以正常调用 this.$parent.getList()
了
<template>
<div>
<Content>
<div>列表</div>
</Content>
<open-modal></open-modal>
</div>
</template>
4. 总结
- 当我们使用第三方
UI
框架而无法用this.$parent
访问父组件的时候,如果非要考虑使用$parent
,我们可以考虑多写几个.$parent
直到找到你想要的那个父组件为止。 - 而且
vue
官方文档明确告诉我们, 要有节制的使用$parent
和$children
,他们主要的目的是作为访问组件的应急方法。更推荐使用props
和$emit
来实现父子组件之间的通信。
更多推荐
已为社区贡献3条内容
所有评论(0)