vue子组件向父组件传值

在 Vue 中，子组件向父组件传值可以通过自定义事件来实现。具体步骤如下：

1. 在子组件中定义一个方法，该方法用于触发自定义事件并将数据作为参数传递给父组件。

   <template>
     <div>
       <button @click="emitData">传递数据给父组件</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
       emitData() {
         this.$emit('eventName', data)
       }
     }
   }
   </script>

其中，`eventName` 是自定义事件的名称，`data` 是要传递给父组件的数据。

2. 在父组件中监听子组件触发的自定义事件，并在事件处理函数中接收子组件传递的数据。

   <template>
     <div>
       <child-component @eventName="handleData"></child-component>
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue'
   
   export default {
     components: {
       ChildComponent
     },
     methods: {
       handleData(data) {
         console.log(data)
       }
     }
   }
   </script>

其中，`handleData` 是事件处理函数，`data` 是子组件传递过来的数据。

这样就完成了子组件向父组件传值的过程。需要注意的是，子组件只能通过触发自定义事件来向父组件传值，而不能直接修改父组件的数据。