时间戳

首页 > 解决方案 > 子组件中的变异道具

javascript - 子组件中的变异道具

问题描述

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

新的.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>

组件/内部人员/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 值。

我该如何解决这个问题？

标签： javascriptvue.jsnuxt.js

解决方案

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

本质上，您正在为用户输入构建一个组件。在这种情况下，组件应该接受 input 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>

推荐阅读