vue3点击按钮向子组件传值样例代码

当然，我很乐意回答你的问题。以下是一个简单的示例代码：

父组件：

<template>
  <div>
    <button @click="sendData">向子组件传值</button>
    <ChildComponent :data="parentData" />
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentData: "",
    };
  },
  methods: {
    sendData() {
      this.parentData = "传递给子组件的值";
    },
  },
};
</script>

子组件：

<template>
  <div>
    <p>我是子组件，接收到的值为：{{ data }}</p>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: {
    data: {
      type: String,
      default: "",
    },
  },
}
</script>

在父组件中，我们通过 `@click` 事件触发 `sendData` 方法，在方法中将要传递给子组件的数据存储在 `parentData` 中。

然后，在父组件的模板中，我们将子组件 `ChildComponent` 引入并通过 `:data` prop 将 `parentData` 传递给子组件。

在子组件中，我们通过定义 `props` 中的 `data` 来接收从父组件传递过来的数据，并在模板中进行渲染。

这里只是一个简单的示例，实际场景中需要根据具体需求进行修改。希望对你有所帮助！