年少无知的我原先是这样调用子组件中的方法的
引用子组件(父组件中):
<ShareBottom ref="child"/>
其中ref相当于赋予子组件一个ID的引用,可以当成标识来看。
调用子组件的方法(父组件中):
<div @click="this.$refs.child.shareClick();">分享</div>
需要改为:
view:
<div class="" @click="toShare()">
分享
</div>
JavaScript:
toShare () {
this.$refs.child.shareClick();
},
简单介绍
vue中父组件调用子组件中的方法
子组件中:
<ShareBottom ref="child"/>
其中是ref:被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs
对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件。
父组件中:
this.$refs.child.shareClick();
父组件中使用this.$refs.child.methodName()的形式调用子组件中方法.
上述做法发生错误的原因,官网给出这样的解释:$refs
只会在组件渲染完成之后生效,并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs
。