vue3父组件触发事件传值给子组件

Vue 3 中，父组件通过事件（通常称为自定义事件或$emit）触发并传递数据给子组件。以下是一个基本示例：

1. **在父组件上创建事件**：

   <template>
     <div>
       <child-component @someEvent="handleSomeEvent"></child-component>
     </div>
   </template>

   // 父组件的script部分
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: { ChildComponent },
     methods: {
       handleSomeEvent(value) {
         this.$emit('someEvent', value);
       }
     }
   }

2. **子组件监听事件**：
子组件需要定义一个名为`someEvent`的事件处理函数，它会接收从父组件传递过来的数据：

   <template>
     <button @click="passDataToParent">传递数据到父组件</button>
   </template>

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

   export default {
     methods: {
       passDataToParent() {
         this.$emit('someEvent', '这是从子组件传给父组件的数据');
       }
     }
   }
   </script>

当你点击子组件的按钮时，`passDataToParent`方法会被调用，然后触发`someEvent`并将数据传递给父组件，父组件内的`handleSomeEvent`方法会接收到这个数据。