如何正确地将数据从子组件传递到父组件和父组件到子组件？答案

【问题标题】：How to properly pass data from child to parent and parent to child component?如何正确地将数据从子组件传递到父组件和父组件到子组件？
【发布时间】：2018-03-08 12:50:01
【问题描述】：

首先，这是我目前的结构

CHILD COMPONENT

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

// JS
props: {
 selectItems: {
  type: Array,
  required: true
 },
 selectedItem: {
  type: String
 },
 compVal: {
  type: Number
 },
}

PARENT COMPONENT

// HTML

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

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

// JS
data () {
 return {
  selectOneItems: [someArray],
  selectedOneItem: null,
  compOneVal: 0,
  selectTwoItems: [someArray],
  selectedTwoItem: null,
  compTwoVal: 0
 }
}

我的场景

1) 在初始状态，我必须从子文本输入中获取值并将其存储在本地。（孩子对父母） 2）浏览器刷新后，我将检查任何本地数据，如果存在，我必须填充孩子的值（父母对孩子）

当前结构的错误

每当我输入或选择某些内容时都会触发此错误

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "compOneValue"

那么如何避免这个错误呢？如何正确实现这个结构，以便我可以在任何我想要的地方重用这个组件。

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

您正在使用 props 和 v-model。当父组件重新渲染时，道具将被覆盖。

使用 data 和 v-model 并从 props 中设置初始值：

子组件

// 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
  },
},

data: function() {
  return {
    selectedItemModel: this.selectedItem,
    compValModel: this.compVal
  }
}

可能值得将您的道具更改为 initialSelectedItem 和 initialCompVal，然后将数据属性称为 selectedItem 和 compVal。

【讨论】：

我有一个问题.. 正如你可以看到上面的结构，我的子组件只不过是一个组件，并在父组件中使用它两次。现在的问题是，当我在两个组件上输入值时，我无法获取字段的值.. 它的 null ..
如果您希望将孩子的价值观传达给父母，这可能会有所帮助：taha-sh.com/blog/…
@SteveHolgado，该链接现在已断开。

【解决方案2】：

您可以使用本地绑定的 setter，然后将其传递给孩子。然后，孩子有一个方法来设置父母的属性。

这是一个例子。

<!-- Component.vue -->

<template>
  <div class="login">
    {{ property }}
    <button v-on:click="setProperty('Something')">
    </button>
    <router-view/>
  </div>
</template>

<script>
const setProperty = (propertyValue) => {
  this.property = propertyValue
}

export default {
  name: 'Login',
  data () {
    return {
      // The 'bind(this)' is crucial since otherwise
      // 'this' will refer to the context of the caller
      // instead of what it is in this context.
      setProperty: setProperty.bind(this),
      property: 'Not something'
    }
  }
}
</script>

【讨论】：