Javascript 如何通过computed属性在Vue.js/infinite loop prevention中管理html表单中的道具

我有一个Vue.js注册表单，它有许多类似的字段。我的理解是，我应该将值初始化为props，而不是对象或数组（因为它们是按值传递的）

我将计算属性与getter/setter一起使用。我可以想象，当我设置computed属性时，我需要向父组件发出该值。这（通常）是正确的方法吗？如果不是，会是什么

另外（这是真正的问题），如果我从setter发出，并在父组件中捕获，这难道不会在它作为道具传回时创建一个无限循环吗？或者vue中是否存在某种机制，如果它不改变，就不会重新发射？也就是说，分配与道具传递的值相同的值是否会导致手表getter触发

与第一部分中建议的组件类似，以及第二部分中如何使用该组件：

Vue.component('signup-input',{
  props:['placeholder','err','initialValue'],
  template:`
  <label>
    <div class='signup-font'>Company Name Within Component</div>
      <input @focus="err = null" v-model="tmpItem" :placeholder="placeholder" size="30" type="text" v-bind:class="{'no-margin error': err }" />
      <label class="error copy-error" v-if="err">
        {{err}}
      </label>
   </label>
  `,
  computed:{
    tmpItem: {
      get: function(){
        return this.initialValue;
      },
      set: function(newValue){
        console.log('here is newValue: ' + newValue); 
        // I emit here and wouldn't an infinite loop be caused? 
      }
    }
  },
})


var app7 = new Vue({
  el: '#signup',
  template: `
    <div id="page-bg">
      <signup-input :placeholder="companyName.placeholder" :err="companyName.err" :initialValue="companyName.value"></signup-input>

      <label for="company_name">
        <div class='signup-font'>Company Name</div>
          <input @focus="companyName.err = null" placeholder="My Company" v-model="companyName.value" size="30" type="text" v-bind:class="{'no-margin error': companyName.err }" />
          <label class="error copy-error" v-if="companyName.err">
            {{companyName.err}}
          </label>
       </label>

Vue.component（'signup-input'{
道具：['placeholder'，'err'，'initialValue']，
模板：`
组件中的公司名称
{{err}}
`,
计算：{
tmpItem：{
get:function（）{
返回此.initialValue；
},
set：函数（newValue）{
log（'这里是newValue:'+newValue）；
//我在这里发射，不会产生无限循环吗？
}
}
},
})
var app7=新的Vue({
el:“#注册”，
模板：`
公司名称
{{companyName.err}

我想您正在寻找类似的产品。有关详细信息，请参阅文档

Vue.component（'signup-input'{
道具：['placeholder'，'err'，'initialValue']，
模板：`
组件中的公司名称
{{err}}
`,
数据（）{
返回{
localValue:this.initialValue
}
}
})
var app7=新的Vue({
el:“#注册”，
模板：`
公司名称
{{companyName.err}

只是一个观察：我相信骆驼化道具是作为dasshed属性提供的：即

道具：['initialValue']

=>

我也想看看这方面的最佳实践。在我的一个项目中，我通过将

fieldName

&

fieldValue

传递到组件中，这样我就可以像

this.$parent.fields[this.fieldName]这样查看和更新父级=this.fieldValue

在更改时，但我对此解决方案不满意。另外，与其使用computed属性，不如使用

和

道具：['value']

和组件模板中的

。

Vue.component('signup-input',{
  props:['placeholder','err','initialValue'],
  template:`
  <label>
    <div class='signup-font'>Company Name Within Component</div>
      <input @focus="err = null" v-model="localValue" :placeholder="placeholder" 
       @input="$emit('update:initialValue', localValue)"
        size="30" type="text" v-bind:class="{'no-margin error': err }" />
      <label class="error copy-error" v-if="err">
        {{err}}
      </label>
   </label>
  `,
  data() {
    return {
      localValue: this.initialValue
   }
  }
})

var app7 = new Vue({
  el: '#signup',
  template: `
    <div id="page-bg">
      <signup-input :placeholder="companyName.placeholder" :err="companyName.err" :initialValue="companyName.value"></signup-input>

      <label for="company_name">
        <div class='signup-font'>Company Name</div>
          <input @focus="companyName.err = null" placeholder="My Company" v-model.sync="companyName.value" size="30" type="text" v-bind:class="{'no-margin error': companyName.err }" />
          <label class="error copy-error" v-if="companyName.err">
            {{companyName.err}}
          </label>
       </label>