Javascript 在这种情况下，如何使用get、set和toggle函数重构v-model？

我有一个vue模板，每个模板都通过一个函数进行切换，用于v-show，其对应的getter和setter用于v-model：

 <p>To : <span v-show="!emailToSW">{{toEmailSet}}</span>
      <input v-show="emailToSW" type="text" v-model.lazy="toEmailSet" />
      <a href="#" @click.prevent="toggleEmailTo();">{{emailToSW ? ' I've implemented a snippet using both your code and a component to model the same things. The component should be called with 
value
 instead of 
v-model
 since the component calls 
componentSignal
 rather than emitting an 
input
 event.


You can see that they both work the same and affect the same things (I made 
componentSignal
 set the value of the variable, but it can do whatever you want it to).




new Vue({
  el: '#app',
  data: {
    emailToSW: true,
    componentGetObject: {
      toEmail: 'hello'
    }
  },
  methods: {
    toggleEmailTo() {
      this.emailToSW = !this.emailToSW;
    },
    componentSignal(obj) {
      console.log('Set', obj.pro, 'to', obj.val);
      this.componentGetObject[obj.pro] = obj.val;
    }
  },
  computed: {
    toEmailSet: {
      get() {
        return this.componentGetObject.toEmail
      },
      set(val) {
        // set does not return anything
        this.componentSignal({
          pro: 'toEmail',
          val
        })
      }
    }
  },
  components: {
    lockableInput: {
      template: '#lockable-input',
      data() {
        return {locked: false};
      },
      props: ['value', 'signal', 'pro'],
      computed: {
        proxyValue: {
          get() { return this.value; },
          set(newValue) { this.signal({pro: this.pro, val: newValue}); }
        }
      },
      methods: {
        toggleLocked() { this.locked = !this.locked; }
      }
    }
  }
});
收件人：{{toEmailSet}
{{emailToSW？'我已经使用您的代码和组件实现了一个代码片段来对相同的东西进行建模。应该使用
value
而不是
v-model
来调用组件，因为组件调用
componentSignal
而不是发出
input
事件

您可以看到，它们都工作相同，影响相同的事情（我让
componentSignal
设置变量的值，但它可以做任何您想做的事情）


newvue({
el:“#应用程序”，
数据：{
是的，
componentGetObject：{
邮件：“你好”
}
},
方法：{
切换到（）{
this.emailToSW=！this.emailToSW；
},
组件信号（obj）{
console.log（'Set'，obj.pro'，to'，obj.val）；
this.componentGetObject[obj.pro]=obj.val；
}
},
计算：{
邮件集：{
得到（）{
返回此.componentGetObject.toEmail
},
设置（val）{
//set不返回任何内容
这是一个信号({
pro:‘toEmail’，
瓦尔
})
}
}
},
组成部分：{
可锁定输入：{
模板：“#可锁定输入”，
数据（）{
返回{locked:false}；
},
道具：['value'，'signal'，'pro']，
计算：{
proxyValue：{
get（）{返回this.value；}，
set（newValue）{this.signal（{pro:this.pro，val:newValue}）；}
}
},
方法：{
toggleLocked（）{this.locked=！this.locked；}
}
}
}
})；

收件人：{toEmailSet}
{{emailToSW？'你能展示这个组件的代码吗？我有一些想法，但需要更多地了解实现。我认为这是它自己的组件。切换控件将是一个内部数据项，它将
v-model
toEmail
变量，并将接收信号回调和变量名作为道具。a我明白了。我花了一些时间来掌握
的东西。当然它可以用组件来建模。Duh..非常感谢..不过有一个小问题，
在主应用程序中总是用换行符呈现，我当然可以为它的前缀添加额外的道具，但我想知道我是否可以这样做：
在
之前评论，真的吗nline在main中？在
标记上放置一个类，并添加css以设置其
显示：内联块