在子组件中改变道具

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>

components/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，因为只要父组件重新渲染，该值就会被覆盖。相反，使用数据或根据道具的价值计算属性。正在改变的道具："name"

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

我该如何解决这个问题？

Answer 1

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

本质上，您是在为用户输入构建一个组件。在这种情况下，组件应该接受输入 prop 并发布它的值。如果你使用 v-model，两者都可以作为一个配置来完成。（'Input' 和 'Output' 配置了单个 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>

在子组件中改变道具

Mutating props in child component

javascript

vue.js

nuxt.js