Vue3 父组件按钮点击事件触发传递参数给子组件

在 Vue3 中，可以使用$refs来获取子组件实例，并通过调用子组件的方法来传递参数。

以下是一个示例代码：

父组件：

<template>
  <div>
    <button @click='handleClick'>点击传递参数给子组件</button>
    <child ref='childRef' />
  </div>
</template>

<script>
import Child from './Child.vue';
export default {
  components: {
    Child,
  },
  methods: {
    handleClick() {
      const child = this.$refs.childRef;
      child.handleReceive('hello');
    },
  },
};
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    handleReceive(message) {
      this.message = message;
    },
  },
};
</script>

在父组件中，使用$refs获取子组件实例，然后调用子组件的handleReceive方法，将参数传递给子组件。在子组件中，接收参数并更新message数据。