VueJS：如何从父组件获取子组件更新后的数据？

嘿，我来帮你搞定这个问题！你在基于Onsen UI的Vue-Cordova-Webpack项目里，子组件用本地变量mutableValue1和mutableValue2来避免直接修改props的警告，现在要让父组件拿到这两个更新后的值，对吧？这里有几个符合Vue最佳实践的方案，给你详细说说：

方案1：自定义事件（最推荐，完全遵循单向数据流） #

这是Vue官方推荐的父子组件通信方式，子组件在值更新时通过$emit触发自定义事件，父组件监听事件并同步自己的数据，完全不会出现修改props的警告。

子组件代码示例 #

<template>
  <div class="child-component">
    <!-- Onsen搜索输入框，绑定本地变量 -->
    <v-ons-search-input 
      v-model="mutableValue1" 
      @input="notifyValue1Update"
      placeholder="请输入搜索内容"
    />
    <!-- Onsen复选框，绑定本地变量 -->
    <v-ons-checkbox 
      v-model="mutableValue2" 
      @change="notifyValue2Update"
    >
      我同意条款
    </v-ons-checkbox>
  </div>
</template>

<script>
export default {
  props: {
    // 接收父组件传递的初始值
    initialValue1: {
      type: String,
      default: ''
    },
    initialValue2: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 本地变量存值，避免直接修改props
      mutableValue1: this.initialValue1,
      mutableValue2: this.initialValue2
    }
  },
  watch: {
    // 如果父组件的初始值发生变化，同步到本地变量
    initialValue1(newVal) {
      this.mutableValue1 = newVal
    },
    initialValue2(newVal) {
      this.mutableValue2 = newVal
    }
  },
  methods: {
    // 触发自定义事件，把更新后的值传给父组件
    notifyValue1Update() {
      this.$emit('value1-updated', this.mutableValue1)
    },
    notifyValue2Update() {
      this.$emit('value2-updated', this.mutableValue2)
    }
  }
}
</script>

父组件代码示例 #

<template>
  <div class="parent-component">
    <!-- 监听子组件的自定义事件，更新父组件数据 -->
    <ChildComponent 
      :initialValue1="parentValue1" 
      :initialValue2="parentValue2"
      @value1-updated="parentValue1 = $event"
      @value2-updated="parentValue2 = $event"
    />

    <!-- 展示从子组件拿到的最新值 -->
    <p>搜索输入的内容：{{ parentValue1 }}</p>
    <p>复选框状态：{{ parentValue2 ? '已勾选' : '未勾选' }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue1: '',
      parentValue2: false
    }
  }
}
</script>

方案2：用v-model语法糖简化写法 #

如果觉得自定义事件的写法有点繁琐，可以利用Vue的v-model语法糖（本质还是props+事件的组合），让代码更简洁。

子组件调整 #

只需要把事件名改成update:xxx的格式，比如：

methods: {
  notifyValue1Update() {
    this.$emit('update:value1', this.mutableValue1)
  },
  notifyValue2Update() {
    this.$emit('update:value2', this.mutableValue2)
  }
}

父组件写法简化 #

可以直接用.sync修饰符（Vue2）或者多v-model（Vue3）：

<!-- Vue2 写法 -->
<ChildComponent 
  :value1.sync="parentValue1"
  :value2.sync="parentValue2"
/>

<!-- Vue3 写法 -->
<ChildComponent 
  v-model:value1="parentValue1"
  v-model:value2="parentValue2"
/>

方案3：使用ref（不推荐，仅特殊场景） #

如果实在不想用事件通信，可以通过ref直接获取子组件实例，访问其内部的mutableValue1和mutableValue2，但这种方法会破坏单向数据流，组件耦合性高，不建议在常规场景使用。

父组件代码示例 #

<template>
  <div>
    <ChildComponent ref="childComp" />
    <button @click="getSubValues">获取子组件值</button>
  </div>
</template>

<script>
export default {
  // ...
  methods: {
    getSubValues() {
      const subVal1 = this.$refs.childComp.mutableValue1
      const subVal2 = this.$refs.childComp.mutableValue2
      // 同步到父组件变量
      this.parentValue1 = subVal1
      this.parentValue2 = subVal2
    }
  }
}
</script>

总结 #

优先选择方案1或方案2，它们完全符合Vue的单向数据流设计，代码清晰易维护，也能完美解决你的需求。方案3只适合一些特殊的临时场景，不推荐作为常规方案使用。

内容的提问来源于stack exchange，提问作者Frank