vue 调用子组件方法失败_vue 父组件调用子组件方法

最近项目中用到的父子组件间的调用挺频繁的，整理下，方便以后查找。

$emit、$on 方式

参考子组件调用父组件方法的第二种方法。

通过ref直接调用子组件方法

//父组件

ref="consumptionTable"

:billDate="billDate"

>

this.$refs.consumptionTable.getData();

//子组件

props: {

billDate: {

type: String,

default: new Date().toLocaleDateString().substr(0, 7).replace("/", "-"),

}

},

methods: {

async getData() {

const res = await this.$API(url, {

month: this.billDate

});

if (res.code === 10000) {

console.log('success')

}

}

}

可能会出现的问题：

如果父组件中改变了billDate，又调用了子组件的getData方法时，比如：

v-model="billDate"

type="month"

:style="'width:189px'"

placeholder="选择日期"

value-format="yyyy-MM"

@change="changeDate"

>

changeDate(date) {

this.$refs.consumptionTable.getData();

}

子组件发送请求时会出现billDate没有更新的情况。

查了下官网，可以使用nextTick：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，可以获取更新后的 DOM。

更详细的介绍：异步更新队列。

so,changeDate里这样写就好了：

this.$nextTick(() => {

this.$refs.consumptionTable.getData();

});

如果consumptionTable的外面是一层循环，通过ref获取的consumptionTable就是一个数组，需要通过相应的index去调用对应的getData方法。

index

this.$refs.consumptionTable[0].getData();