javascript - 在子组件中改变 Prop

Question

在我的父 Vue 页面中，我在我的表单中调用一个 FormInput

new.vue

<b-form @submit.prevent="submit">
   <FormInput :name="name"/>
   <b-button @click="submit">Save</b-button>
<b-form>

<script>
 import FormInput from '~/components/Insiders/FormInput';
 export default {
   components: {
    FormInput
   },  
   data() {
     return {
      name: 'User A'
     }
   },
   methods:  {
     submit(event) {
      console.log(this.name)
     }
   }
 }
</script>

组件/Insiders/FormInput.vue

<b-form-input v-model="name" type="text"></b-form-input>  
<script>
export default {
  props:   {
    name: { type: String, required: true }
  }
}
</script>

我收到一个错误:避免直接修改 prop，因为只要父组件重新渲染，该值就会被覆盖。相反，使用基于 prop 值的数据或计算属性。正在改变的 Prop :“名字”

我在这里期望的是，当我更改来自 new.vue 的输入值时，我应该能够在单击提交按钮时 console.log name 的新值。

我该如何解决这个问题？

Answer 1

此用例的正确方法是为您的组件 FormInput 支持 v-model。

本质上，您是在为用户输入构建一个组件。在这种情况下，组件应该接受输入 prop 并发布它的值。如果你使用 v-model，两者都可以作为一个配置来完成。 (“输入”和“输出”配置有单个 v-model 属性)。

引用这些文章:

https://alligator.io/vuejs/add-v-model-support/

https://scotch.io/tutorials/add-v-model-support-to-custom-vuejs-component

编辑:

v-model 方法使 FormInput 组件易于使用。因此，New.vue 中的更改很简单:

<b-form @submit.prevent="submit">
   <FormInput :v-model="name"/>
   <b-button @click="submit">Save</b-button>
<b-form>

<script>
 import FormInput from '~/components/Insiders/FormInput';
 export default {
   components: {
    FormInput
   },  
   data() {
     return {
      name: 'User A'
     }
   },
   methods:  {
     submit(event) {
      console.log(this.name)
     }
   }
 }
</script>

但是，为了不改变实际的输入，FormInput 组件仍然需要做一些额外的工作。

<b-form-input :value="value" @input='updateVal' type="text"></b-form-input>  
<script>
export default {
  props:   {
    value: { type: String, required: true }
  },
  methods: {
      updateVal: function(val){
           this.$emit('input', val);
      }
  }
}
</script>