在Vue.JS中，如何将props值传递和更改到嵌套组件中？

Question

我的要求非常基本且简单，但不知道为什么 ChatGPT 一直给我带有警告消息的答案。

我正在使用 Vue 2。 我有三个嵌套组件：

GrandParentComponent

、

ParentComponent

、

ChildComponent

。

现在我在

someId

中有一个数据

GrandParentComponent

，我想将这些数据一直传递到

ChildComponent

并更改它。

GrandComponent.vue:

<template>
  <div>
    {{ someId }}
    <ParentComponent :someId.sync="someId"/>
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue';

export default {
  components: {
    ParentComponent
  },
  data() {
    return {
      someId: [] // Initial value
    };
  }
};
</script>

ParentComponent.vue::

<template>
  <div>
    <ChildComponent :someId.sync="someId"/>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  props: {
    someId: {
      type: Array,
      required: true
    }
  }
}
</script>

ChildComponent.vue：

<template>
  <div>
    <button @click="selectIds">Select IDs</button>
  </div>
</template>

<script>
export default {
  props: {
    someId: {
      type: Array,
      required: true
    }
  },
  methods: {
    selectIds() {
      // Simulate generating new ids
      const randomIds = [1, 2, 3];

      // Emit the update event with the new ids
      this.$emit('update:someId', randomId);
    }
  }
};
</script>

上面的代码是由ChatGPT生成的，它可以工作，但是，它在浏览器控制台中不断显示以下消息：

有什么原因会显示此警告消息吗？我该如何解决这个警告问题？ 在Vue中传递props值并更改值的正确方法是吗？

Answer 1

原始代码无法运行，因为它不包含修改的部分

someId

；

update:someId

在没有监听器的情况下不会这样做。

ParentComponent 应该以两种方式传递一个值，以实现双向数据绑定。需要进行以下更改：

GrandComponent.vue

<ParentComponent :someId="someId" @update:someId="someId = $event" />

ParentComponent.vue

<ChildComponent :someId="someId" @update:someId="$emit('update:someId', $event)" />

ChildComponent.vue

<button @click="selectIds">Select IDs</button>

如果组件使用

someId

作为主值，

someId

prop 和

update:someId

事件可以相应地重命名为

value

和

input

，以遵循 Vue 2 中的

v-model

约定，这允许使用

 v-model="someId"

在 GrandParentComponent 中。 Vue 3 允许使用除

value

和

v-model

之外的其他 prop 名称。