在 Vue.js 中，组件通过 props 属性来接收外部传入的数据。在组件内部，可以将 props 视为组件的属性，可以使用这些属性来渲染组件的模板。这种组件和父组件之间的通信方式能够让你更灵活地构建复杂的应用程序。
基本用法
在父组件中使用子组件时，可以通过 v-bind 指令将数据传递给子组件。以下示例演示如何在父组件中定义一个 message 数据属性，并将它传递给子组件：
---- --- ---
----------
-----
------------ -------------- ---------------------
------
-----------
--------
------ ---------- ---- ------------------
------ ------- -
----------- -
----------
-
-
------------- --- ---
----------
------- ------- --------
-----------
--------
------ ------- -
------ -
-------- ------
-
-
---------在子组件中定义的 props 可以使用 props 块来明确指定要接收的数据类型。在上面的示例中，我们在子组件中使用了 props 块，并指定了接收的数据类型为字符串。
设置默认值
有时传递的数据并不是必须的，这时可以设置默认值。示例代码如下所示：
---- --- ---
----------
-----
---------------------------
------
-----------
--------
------ ---------- ---- ------------------
------ ------- -
----------- -
----------
-
-
------------- --- ---
----------
------- ------- --------
-----------
--------
------ ------- -
------ -
-------- -
----- -------
-------- ------ ------
-
-
-
---------上面的示例代码中，我们在子组件中的 props 块中使用了 default 选项来指定一个默认值。这个默认值会在父组件没有传递该属性时使用。
验证传入数据
有时，在子组件中需要对接收的数据进行类型验证。这时可以使用内置的验证器选项对数据类型进行验证。在下面的示例代码中，我们对 message 属性进行了验证：
---- --- ---
----------
------- ------- --------
-----------
--------
------ ------- -
------ -
-------- -
----- -------
--------- -----
---------- --------------- -
------ ------------ - -
-
-
-
-
---------在这个示例中，validator 选项接收一个函数，这个函数应该返回一个布尔值用于验证传入的值是否合法。
使用驼峰式
在 HTML 定义属性时，通常使用的是连字符分隔的单词，而在 JavaScript 中，我们通常使用驼峰式来定义变量名。当使用 props 属性时，Vue.js 会根据 HTML 中定义的属性名来匹配组件中的 props 变量名。但是，如果组件定义的 props 属性采用驼峰式，那么在 HTML 定义时，需要使用连字符分隔的格式。示例代码如下所示：
---- --- ---
----------
------- -------- --------
-----------
--------
------ ------- -
------ -
--------- ------
-
-
------------- --- ---
----------
-----
------------- ----------------------------------
------
-----------
--------
------ ----------- ---- -------------------
------ ------- -
----------- -
-----------
-
-
---------在上面的示例中，我们将子组件的 props 属性定义为 userName，但在 HTML 中，我们传递的属性名为 user-name。
属性传递
props 也可以是一个数组，用来在子组件中接收多个属性。示例代码如下所示：
---- --- ---
----------
-----
----- ----- ------
----- ------ ------
------
-----------
--------
------ ------- -
------ --------- ---------
-
---------在父组件传入多个属性时，可以这样做：
---- --- ---
----------
-----
------------- -----------------------------
------
-----------
--------
------ ----------- ---- -------------------
------ ------- -
----------- -
-----------
--
------ -
------ -
----- -
------ ------------ --- ---------- -------
------- ------ ---------
-
-
-
-
---------在上面的代码中，我们使用 v-bind 指令将对象 book 传递给子组件。在子组件中，我们使用 props 数组来接收传入的属性。这样就可以避免在父组件中重复对每个属性都使用 v-bind 来传递。
结论
props 可以让你在子组件中接收父组件传递过来的数据，这让你能够更好地组织你的应用程序。通过设置默认值和数据类型验证，可以使你的组件更加健壮和安全。对于大型的应用程序，使用 props 数组可以简化传递的任务。
以上就是 Vue.js 2.0 中如何使用 props 传递数据的详细指南，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66ff81d61b0bf82c71caf57b