javascript - Vue.js:将 props 传递给数据以在 v-model 中使用

Question

我一直在尝试将属性传递给这样的数据，正如我在另一篇文章中看到的:

子组件:

props: {
  idInput:   { type: String, required: false },
  nameInput: { type: String, required: false },
},
data() {
  return {
    id: this.idInput,
    name: this.nameInput,
  }
}

所以我可以在这里使用它:

<t-input v-model="name" type="text" />

父组件:

data() { return { game: {} } },
beforeCreated() { this.game = { name: "myName", id: "myID" }

<ChildComponent :name-input="game.name" :id-input="game.id" />

问题是“name”似乎未定义，而如果我做同样的事情但将“name”更改为“nameInput”它可以工作，但我收到 Vue 错误告诉我不要使用这样的 Prop 。有什么想法吗？

Answer 1

这是我创建的一个功能示例来演示此案例:

const comp = Vue.component('comp', { 
  template: '#myComp',
  props: {
    idInput:   { type: String, required: false },
    nameInput: { type: String, required: false },
  },
  data() {
    return {
      id: this.idInput,
      name: this.nameInput,
    }
  }
});

new Vue({
  el: "#myApp",
  data () {
    return {
      game: {}
    }
  },
  created() {
    this.game = { name: 'myName', id: 'myID' };
  },
  components: { comp }
});

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

<div id="myApp">
  <comp :name-input="game.name" :id-input="game.id" />
  {{game}}
</div>

<template id="myComp">
  <div>
    {{idInput}}
    <br>
    <input v-model="name" type="text" />
  </div>
</template>

编辑: 检查代码后，我认为问题在于您在 beforeCreated 的父组件的 data 中设置了 game 属性。将其设置为created。

编辑 OP找到了另一种方法来做到这一点。不要逐一传递 props，只需向对象传递 1 个 prop，并在 v-model 上使用其属性。