Vue.js 自定义组件中没有发生变异？

首先，这是我目前的结构

子组件

// HTML
<v-select
 v-bind:items="selectItems"
 v-model="selectedItemModel"
 label="Category"
 item-value="text"
></v-select>
<v-text-field
 label="Enter Value"
 type="number"
 v-model="compValModel"
></v-text-field>

// JS
props: {
 selectItems: {
  type: Array,
  required: true
 },
 selectedItem: {
  type: String
 },
 compVal: {
  type: Number
 },
}
date () {
 return {
  selectedItemModel: this.selectedItem,
  compValModel: this.compVal
 }
}

// HTML

<component :selecItems="selectItems" :selectedItem="selectOneItem" 
:compVal="compOneVal"></component>

<component :selecItems="selectItems" :selectedItem="selectTwoItem" 
:compVal="compTwoVal"></component>

// JS
data () {
 return {
  selectItems: [some array]
 }
},
computed: {
 selectedOneItem: {
  get () {
    return this.$store.state.selectedOneItem
  },
  set (value) {
    this.$store.commit('selectedOneItem', value)
  }
 },
 selectedTwoItem: {
  get () {
    return this.$store.state.selectedTwoItem
  },
  set (value) {
    this.$store.commit('selectedTwoItem', value)
  }
 },
 compValOne: {
  get () {
    return this.$store.state.compValOne
  },
  set (value) {
    this.$store.commit('compValOne', value)
  }
 },
 compValTwo: {
  get () {
    return this.$store.state.compValTwo
  },
  set (value) {
    this.$store.commit('compValTwo', value)
  }
 }
}

存储

\\ STATE
compOneVal: 0,
compValTwo: 0,
selectedOneItem: null,
selectedTwoItem: null

\\ GETTER
compOneVal: (state) => state.compOneVal
compTwoVal: (state) => state.compTwoVal
selectedOneItem: (state) => state.selectedOneItem
selectedTwoItem: (state) => state.selectedTwoItem

\\ MUTATION
compOneVal (state, v) {
 state.compOneVal = v
},
compTwoVal (state, v) {
 state.compTwoVal = v
},
selectedOneItem (state, v) {
 state.selectedOneItem = v
},
selectedTwoItem (state, v) {
 state.selectedTwoItem = v
}

什么起作用了？ 当我不使用组件结构时，通过在父组件中显式地放置html。一切都很顺利

什么不起作用？ 当我使用组件结构时，所有输入和选择不会发生突变。它只有初始状态值

那么我做错了什么？为什么没有组件结构而不使用组件结构工作？

除了@thanksd提到的键入（

selectItems

而不是

selectItems

）之外

我会给你一些提示，这些提示是文档推荐的，可以帮助你

使用操作触发突变，而不是直接提交

您的状态应该用您希望的类型初始化，例如：空数组、对象或字符串

如果要访问子组件的存储值，请直接访问（访问子组件中的存储）。除非确实需要，否则不要传递道具，例如：您可能希望传递与存储中不同的值，或者在父级上使用相同的值

如果您有getter，那么使用

mapGetters

可能是更好的选择。除此之外，

mapActions

。因此，您可以使用组件中存储的直接值，而无需始终使用

this.$store

---

您有几个语法错误：

• 在子组件的标记中传递一个

  selecItems

  prop，它应该是

  selectItems

• 您的子组件中有一个

  date

  函数，它应该是

  data

---

但根本问题是您没有修改父组件上的那些计算属性。您只是将它们传递给子组件。如果您希望在父级范围内更改变量以响应来自子组件的某个事件，则需要从子级发出该事件的事件，并在父级中侦听该事件

通常，您可以通过在子组件标记上使用。这样，当从子级发出

input

事件时，父级上的属性将自动更新（无需显式侦听父级中的

@input

事件）

但是，由于您显然试图将两个单独的值绑定到子组件（

selectedItem

和

compVal

），因此当子组件上的任一相关数据属性更改时，您应该发出两个单独的事件：

props: {
  selectItems: {
    type: Array,
    required: true
  },
  selectedItem: {
    type: String
  },
  compVal: {
    type: Number
  },
}
data() {
  return {
    selectedItemModel: this.selectedItem,
    compValModel: this.compVal
  }
},
watch: {
  selectedItemModel(value) {
    this.$emit('selectedItemInput', value);
  },
  compValModel(value) {
    this.$emit('compValInput', value);
  }
}

然后，在父级上侦听这些事件并更新相应的属性：

<component 
  :selecItems="selectItems" 
  :selectedItem="selectOneItem" 
  :compVal="compOneVal"
  @selectedItemInput="selectOneItem = $event"
  @compValInput="compOneVal = $event"
></component>

因此，现在，每当子组件的

selectedItemModel

或

compValModel

数据属性发生更改时，父组件的相应属性都将更新，并触发相应的计算属性

set

方法，从而更新存储