在子 vue 組件數據函數中訪問道具？

Question

我有以下子組件。 道具是從父項中的輸入選擇器更新的。 為什么level: this.globalForm.level不更新孩子的level

家長：

<template>
  <div>
    <div class="form-container">
      <select class="form-control" v-model="level">
        <option v-for="level in options" v-bind:key="level">{{ level }}</option>
      </select>
      <button @click="submit()">Create</button>
    </div>
    <child v-bind:globalForm="globalForm"/>
  </div>
</template>

    <script>
inputFiled;
export default {
  data() {
    return {
      level: "",
      globalForm: {
        level: ""
      },
      options: ["level1", "level2", "level3"]
    };
  },
  components: {
    child
  },
  methods: {
    submit() {
      this.globalForm.level = this.level;
    }
  },
  watch: {
    level() {
      this.globalForm.level = this.level;
    }
  }
};
</script>

孩子：

<template>
  <div class="form-container">
      <option v-for="level in options" v-bind:key="level">{{ level }}</option>
  </div>
</template>

<script>
export default {
  props: { globalForm: Object },
  data() {
    return {
      options: ["level1","level2","level3",],
      level: this.globalForm.level //this does not update the child's level component
    };
  }
};
</script>

Answer 1

TLDR

level應該是孩子的計算屬性，以便您可以檢測道具的變化。 您在data函數中設置level ，因此對 prop 的更新永遠不會使其達到level 。

在下面，您將找到一個關於我認為您想要實現的目標的最小示例。

 Vue.config.productionTip = false; Vue.component('parent', { template: ` <div class="parent"> <b>PARENT</b> <div class="form-container"> <select class="form-control" v-model="level"> <option v-for="level in options" v-bind:key="level">{{ level }}</option> </select> <button @click="submit()">Create</button> </div> <child v-bind:globalForm="globalForm"/> </div> `, data: () => ({ level: "", globalForm: { level: "" }, options: ["level1", "level2", "level3"] }), methods: { submit() { this.globalForm.level = this.level; } } }); Vue.component('child', { template: ` <div class="form-container child"> <p><b>Child</b></p> Level: {{ level }} </div> `, props: { globalForm: Object }, computed: { level() { return this.globalForm.level; } } }); new Vue({ el: "#app" })

 .parent { background-color: darkgray; padding: .5em; border: solid 1px black; } .child { background-color: lightgray; padding: .5em; border: solid 1px black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <parent></parent> </div>

更詳細的解釋

您的代碼中有幾個錯誤，我將通過這些錯誤。

在您的子組件中

初始化組件時， this在data函數中不可用，因此this.globalForm將是未定義的。 重現控制台時會在控制台中引發錯誤。

data() {
    return {
      options: ["level1","level2","level3",], // this looks like duplicated code from the parent
      level: this.globalForm.level // throws error
    };
 }

要修復該錯誤，您可以從data的參數中獲取vm上下文但這不是您問題的解決方案。

data(vm) { // note vm
    return {
      level: vm.globalForm.level // note vm
    };
 }

真正的問題是那個level: this.globalForm.level在你的組件初始化中只運行一次，所以 level 是undefined 。 當globalForm改變時， level已經初始化並且不會改變（數據返回一個新對象，所以對 prop 的引用丟失）。

您希望 convert level是一個計算屬性，以便可以檢測到對 prop 的更改並返回內部值。 請參閱上面的代碼片段。