在vue3中，在父组件里点击按钮把数据list传给子组件

在Vue3中，通过props（属性）可以实现从父组件向子组件传递数据。以下是步骤：

1. **父组件**中创建`data`并初始化`list`：

export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3'], // 初始化的数据列表
    };
  },
};

2. **在需要传递数据的按钮上绑定事件处理函数**，在这个函数中调用`emit`触发自定义事件，并将`list`作为参数：

<template>
  <button @click="passDataToList">点击传递数据</button>
</template>

<script>
methods: {
  passDataToList() {
    this.$emit('childEvent', this.list);
  },
}
</script>

这里的`childEvent`是你需要在子组件中监听的事件名。

3. **子组件接收数据**：

<template>
  <div v-on:childEvent="handleParentData"></div>
</template>

<script>
import { onMounted } from 'vue';

export default {
  methods: {
    handleParentData(list) {
      console.log('接收到的list:', list); // 子组件中处理接收到的数据
      // 在这里你可以使用这个list进行操作
    },
  },
  mounted() {
    onMounted(() => {
      this.$on('childEvent', this.handleParentData);
    });
  },
  beforeDestroy() {
    this.$off('childEvent', this.handleParentData);
  },
};
</script>

子组件会在挂载时自动监听来自父组件的`childEvent`，并在接收到数据时调用相应的处理方法。