vue如何将子组件的值实时传递给父组件

Vue.js 中，要实现实时将子组件的值传递给父组件，可以使用props和v-model配合。以下是基本步骤：

1. **父组件向子组件传值**:
- 父组件定义一个prop（属性），并指定数据类型。例如：

     <template>
       <child-component :value="parentValue" />
     </template>

- `:value` 是 prop 的绑定，`parentValue` 是父组件中想传递的数据。

2. **子组件接收值**:
- 子组件需要通过props来接收这个值，并可以在模板中使用它：

     <template>
       <input v-model="localValue" @input="$emit('update:value', localValue)" />
       <!-- 当输入发生变化时，通过 $emit 触发自定义事件 'update:value' 并传入新的值 -->
     </template>

3. **更新父组件的值**:
- 子组件内部有一个 `localValue` 变量，用户交互时会触发 `@input` 事件。当事件触发时，我们会通过 `$emit` 发送一个新的值给父组件。父组件可以通过监听这个事件更新 `parentValue`：

     // 子组件 script 部分
     export default {
       props: ['value'],
       data() {
         return { localValue: '' };
       },
       methods: {
         handleChange(event) {
           this.$emit('update:value', event.target.value);
         }
       }
     }

现在，每当子组件中的输入框值改变，父组件就能接收到这个更新了。