vue中父组件如何实时获取子组件填的数据

在Vue.js中，父组件要实时获取子组件传递过来的数据，可以使用props（属性）和v-once指令配合或者Vuex状态管理。以下是两种常见方法：

1. **Props**：
父组件可以通过props向下传递数据给子组件。当子组件的值发生改变并通过`$emit`触发自定义事件（如`update-value`），父组件可以在`methods`里监听这个事件，并更新接收的数据。

<!-- 子组件 -->
<template>
  <input v-model="value" @change="parentUpdateValue" />
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
      // 如果需要监听值的变化，添加.sync修饰符
      // 这样父组件会直接看到子组件的实时变化
      // :value.sync="parentValue"
    }
  },
  methods: {
    parentUpdateValue() {
      this.$emit('update-value', this.value);
    }
  }
};
</script>

// 父组件
<template>
  <child-component :value="parentValue" @update-value="handleChildValueChange"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  data() {
    return {
      parentValue: ''
    };
  },
  methods: {
    handleChildValueChange(value) {
      this.parentValue = value;
    }
  }
};
</script>

2. **Vuex** (适用于大型应用的数据共享):
如果数据需要在整个应用中保持统一，可以使用Vuex作为状态容器。子组件通过actions修改状态，然后通过mutations通知父组件更新。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

const store = new Vuex.Store({
  state: {
    childValue: ''
  },
  mutations: {
    updateChildValue(state, value) {
      state.childValue = value;
    }
  },
  actions: {
    async handleChildValueChanged({ commit }, value) {
      // ... 子组件处理逻辑 ...
      commit('updateChildValue', value);
    }
  }
});

export default store;

// 父组件
<template>
  <child-component @childValueChanged="handleChildValueFromChild"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import store from '@/store';

export default {
  components: { ChildComponent },
  computed: {
    parentValue() {
      return store.state.childValue;
    }
  },
  methods: {
    handleChildValueFromChild(value) {
      store.dispatch('handleChildValueChanged', value);
    }
  }
};
</script>