ES6 中的解构语法实现 props 默认值
在 React 或 Vue 中，常常需要传递父组件的数据给子组件，这时候就需要用到 props。但是有些情况下，父组件并不一定传递所有的 props 给子组件，这时候就需要在子组件中实现默认值。
在 ES6 中，我们可以使用解构语法来实现 props 的默认值。
例如，我们有一个组件 MyComponent，需要从父组件传递一个名字和一个年龄：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------------ -
----- ---- - -----------
----- --- - ----------
------ -
-----
-------------
------------
------
--
-
------ ------- ------------如果父组件不传递 name 或 age 给 MyComponent，那么我们可以在 MyComponent 中添加默认值：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------------ -
----- - ---- - ------ --- - -- - - ------
------ -
-----
-------------
------------
------
-
-
------ ------- ------------这里我们用 { name = 'Tom', age = 20 } 对 props 进行了解构，如果 name 或 age 没有在 props 中传递，那么它们就会使用默认值。
不仅在 React 中可以使用解构语法来实现 props 的默认值，在 Vue 中同样适用：
-- -------------------- ---- -------
----------
-----
----- ---- ------
----- --- ------
------
-----------
--------
------ ------- -
----- --------------
------ -
----- -
----- -------
-------- -----
--
---- -
----- -------
-------- --
-
-
-
---------在 Vue 中，我们可以直接在 props 中设置默认值，省去了在组件中进行解构的步骤。
总结
本文介绍了在 ES6 中使用解构语法来实现 props 的默认值。对于初学者来说，掌握这种语法可以更加方便地使用 React 或 Vue 的开发。此外，在其他场景中，解构语法也是一种非常实用的语法，深入学习 ES6 可以帮助我们更好地开发现代化的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b4a79badd4f0e0ffd89d5a