javascript - 在子 vue 组件数据函数中访问 props？

Question

我有以下子组件。 Prop 是从父级中的输入选择器更新的。为什么 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>

child :

<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 应该是子级的计算属性，以便您可以检测 prop 中的更改。您正在 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 是未定义。当 globalForm 属性更改时，level 已经初始化并且不会更改(数据返回一个新对象，因此对该属性的引用丢失)。

您希望将level转换为computed property这样就可以检测到 prop 的更改并返回内部值。请参阅上面的代码片段。