antdesignvue 父控件操作子控件

在Ant Design Vue中，通常使用`ref`来引用子组件，并通过该引用访问子组件的属性和方法。以下是一个示例：

<template>
  <div>
    <ChildComponent ref="childComponent" />
    <button @click="handleClick">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      this.$refs.childComponent.doSomething()
    }
  }
}
</script>

在这个例子中，我们使用`ref`给子组件`ChildComponent`分配一个引用名`childComponent`。然后，我们可以在父组件中使用`this.$refs.childComponent`来访问子组件，并调用其方法`doSomething()`。

需要注意的是，使用`ref`引用子组件会在父组件创建时创建，因此在父组件`mounted`生命周期之前，子组件可能还没有完全创建。因此，为了避免在子组件未完全创建时访问其属性和方法，通常需要在`$nextTick`中使用`ref`。例如：

<template>
  <div>
    <ChildComponent ref="childComponent" />
    <button @click="handleClick">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      this.$nextTick(() => {
        this.$refs.childComponent.doSomething()
      })
    }
  }
}
</script>

在这个例子中，我们在`$nextTick`回调函数中访问子组件，以确保子组件完全创建。