vue父组件调用子组件方法的时候,子组件还未渲染成功
时间: 2023-11-24 19:08:40 浏览: 122
Vue父组件调用子组件事件方法
5星 · 资源好评率100%
当父组件调用子组件方法时,如果子组件还未渲染成功,会导致该方法无法正常执行。为了解决这个问题,可以使用Vue的$nextTick方法,该方法会在DOM更新后执行回调函数,确保子组件已经渲染成功。
以下是一个示例代码:
```vue
<template>
<div>
<bar-chart-date-range ref="barChartDateRange"></bar-chart-date-range>
<button @click="handleClick">调用子组件方法</button>
</div>
</template>
<script>
import BarChartDateRange from "@/components/Echarts/BarChartDateRange";
export default {
name: "Blog",
components: {
BarChartDateRange,
},
methods: {
handleClick() {
this.$nextTick(() => {
this.$refs.barChartDateRange.getSelectedRangeList(val);
});
},
},
};
</script>
```
阅读全文