Vue 在父组件里调用子组件的方法

最近在开发 QQ 机器人和它的管理面板，面板用的 Vue.js + element-ui。

我把「成员列表」写成一个组件 memberTable，里面是一个表格和拉数据的函数 getMemberList()。「成员管理」页面用了这个组件，页面上另有添加、删除成员的按钮。添加或删除之后表格里的数据就旧了，要重新拉一遍，但是拉数据的函数在组件里，按钮在组件外，页面没办法直接调用组件内的函数。

解决方法是在使用组件的时候给组件加上 ref，页面里通过 this.$refs.名字 拿到组件实例，再调用它的函数。

<template>
    ...
    <memberTable ref="memberTable" />
    ...
</template>

<script>
    import memberTable from '@/components/membertable.vue'
    ...
    export default {
    	...
    	this.$refs.memberTable.getMemberList()
        ...
    }
</script>

ref="memberTable" 里的名字是自己起的，$refs 里按它找。this.$refs.memberTable.getMemberList() 和在组件内部调 this.getMemberList() 效果一样。添加成员的请求成功之后调一次，表格就刷新了。

$refs 只在组件渲染完成后才有值，created 里拿不到，要在 mounted 之后用。按钮点击肯定在渲染之后，这里没问题。