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>

我遇到一个错误： 避免直接更改道具，因为每当父组件重新渲染时，该值就会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变：“名称”

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

我该如何解决？

Answer 1

此用例的正确方法是为组件FormInput支持v模型。

本质上，您正在构建用于用户输入的组件。在这种情况下，组件应采用输入prop并发布其值。如果使用v-model，则两者都可以作为单个配置完成。（“输入”和“输出”配置有一个v模型属性）。

请参阅以下文章：

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

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

编辑：

v模型方法使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>

在子组件中突变道具

1 个答案: