Vue v-model 命名最佳实践答案

【问题标题】：Vue v-model naming best practiceVue v-model 命名最佳实践
【发布时间】：2019-11-15 11:46:14
【问题描述】：

我只是在寻找一些关于 Vue v-model 命名约定的最佳实践建议。

我见过只使用这样一个名称的代码：

<input name="surname" v-model="surname"/>

export default {
  data: function () {
    return {
      surname: '',

我也见过这样的点符号：

<input name="surname" v-model="customer.surname"/>

export default {
  data: function () {
    return {
      customer: {
        surname: undefined
      }
    },

是否有最佳实践命名约定，或者只是您喜欢的任何一种情况？

我只是想在学习时避免任何潜在的陷阱，而不是以后偶然发现它们。

【问题讨论】：

任何能让你更容易理解上下文的东西。你知道姓氏属于客户吗？如果组件只处理单个客户数据，我们可能会不使用客户对象。但是除了命名约定之外，对象还有其他用途，例如，如果您想将客户发送到 API，或者如果您想循环对象键或添加新属性，则可以节省几行代码。
请不要在您的帖子中添加签名。我们在这里达成了一些社区协议，即个人资料块足以“签名”帖子的作者身份。元链接可应要求提供。谢谢！

标签： vue.js naming-conventions v-model

【解决方案1】：

这不是与 v-model 相关的问题。 v-model 只是绑定到组件的数据以及您对这些属性的要求。

没有一般规则。你的两个例子在不同的情况下都是正确的。可读性很重要。

我会先使用例如。对于客户组件。很明显 surname 是客户属性，而在属性名称中重复单词 customer 是多余的。

在组件保留多个对象的情况下，使用 customer.surname 可能就足够了，不仅是客户，而且您想清楚姓氏所属的位置。

此外，当将客户作为对象从父组件传递时，您可能以绑定到 customer.surname 结束

【讨论】：

感谢大家的投入 - 我没有想过将数据发送到 API，在这种 API 中传递单个对象而不是多个参数会使事情变得更容易