Vue v-model 命名最佳实践

Question

我只是在寻找一些关于 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
      }
    },

是否有最佳命名惯例，或者只是您喜欢的一种情况？

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

Answer 1

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

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

我会先使用例如。对于客户组件。很明显姓氏是客户属性并且在属性名称中重复单词客户是多余的。

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

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

结束

Vue v-model 命名最佳实践

Vue v-model naming best practice

vue.js

naming-conventions

v-model