问题背景
在 Vue.js 的组件中，一个组件在内部定义了 data 选项，同时又接收了一个名为 propName 的 prop，如果这两者名称相同，就会产生一个难以察觉的错误。举个例子：
-- -------------------- ---- -------
----------
-----
------ ----- -------
------ ----------- --------------- --
------
-----------
--------
------ ------- -
----- --------------
------ -
------ -
----- -------
-------- ------- --------
--
--
------ -
------ -
------ ------- ------
-
--
-
---------这个组件里定义了一个名为 title 的 prop，同时在 data 中也定义了一个名称相同的属性。在模板中，我们用了 {{ title }} 来显示 MyComponent 接收到的 title 值，并使用 v-model 指令让用户可以编辑这个 title 值。但是，我们会发现，当用户在输入框中输入内容时，并不会更新 MyComponent 中的 title 值，因为 v-model 指令绑定的是 data 中的 title 属性，而不是 prop 中的 title。
这个问题通常会在组件嵌套很深的情况下出现，因为嵌套的组件树中有可能出现同名的 prop 和 data 属性。
解决方案
我们可以通过严格的命名约定来规避这个问题。具体的做法是：
- 将 prop 名称始终用驼峰命名法，如
propName - 将 data 名称始终用下划线命名法，如
data_name
通过这样的命名约定，就可以确保 v-model 指令始终绑定在 data 属性上，而不会与 prop 属性名称发生冲突。
比如，我们可以这样修改上述例子中的代码：
-- -------------------- ---- -------
----------
-----
------ --------- -------
------ ----------- ------------------- --
------
-----------
--------
------ ------- -
----- --------------
------ -
--------- -
----- -------
-------- ------- --------
--
--
------ -
------ -
----------- ------- ------
-
--
--------- -
---------- -
----- -
------ ---------------
--
---------- -
--------------- - -----
--
--
--
-
---------这样，我们就将 propName 重命名为了 propName，将 data 属性名重命名为了 data_title，同时通过计算属性 dataTitle 将 data_title 封装起来，使其能够被 v-model 指定。这样，我们就成功规避了 data 和 prop 名称冲突的问题。
总结
在 Vue.js 中，为避免 data 和 prop 名称冲突的问题，我们可以采用一定的命名约定。这个约定通常包括使用驼峰命名法为 prop 命名，使用下划线命名法为 data 命名，并通过计算属性将 data 属性封装起来，以便于支持 v-model 指令。这样，我们就可以在组件中安全地使用同名的 data 和 prop，同时避免了由此带来的难以察觉的错误。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6530e2507d4982a6eb2738e8