Vue.js 是一种流行的前端框架，它采用了组件化的方式来构建用户界面。在 Vue.js 中，父组件可以向其子组件传递数据，以便子组件在渲染过程中能够使用这些数据。本文将介绍 Vue.js 中父子组件数据传递的方式，包括 props、事件和 provide / inject。
props
props 可以将父组件的数据传递给子组件。子组件通过使用 props 属性来声明接收哪些数据，然后父组件可以将这些数据通过组件标签的属性传递给子组件。
例如，下面是一个简单的父组件和子组件：
-- -------------------- ---- ------- ---------- ----- ---------------- ----------------------------------------------- ------ ----------- -------- ------ -------------- ---- ---------------------- ------ ------- - ----------- - -------------- -- ------ - ------ - ------------------ ------ ------- - - - ---------展开代码
子组件代码如下：
-- -------------------- ---- ------- ---------- ----- ----- ------- ------ ------ ----------- -------- ------ ------- - ------ - -------- ------ - - ---------展开代码
在子组件代码中，props 包含一个对象，其中每个属性定义了该属性的类型。在此示例中，message 是一个字符串类型。这使得 Vue.js 可以对这些属性进行类型检查，并在必要时发出警告。
关键在父组件中，我们将 messageFromParent 作为属性传递给子组件。在子组件中，我们可以使用该属性通过模板来访问。
事件
除了 props，子组件可以通过事件系统与其父组件通信。子组件可以触发事件并向其父组件传递数据，父组件可以侦听这些事件并在其事件处理程序中处理数据。
在子组件中触发事件的代码如下：
-- -------------------- ---- ------- ---------- ----- ------- ----------------------------- -------------- ------ ----------- -------- ------ ------- - -------- - ------------- -------- -- - ------------------- ------ -------- - - - ---------展开代码
在此示例中，我们定义了名为 triggerEvent 的方法，当用户单击按钮时该方法将触发事件。在此示例中，我们传递了一个字符串“Hello World!”作为事件的参数。在父组件中，我们可以使用 @event 监听事件：
-- -------------------- ---- ------- ---------- ----- ---------------- --------------------------------------- ------ ----------- -------- ------ -------------- ---- ---------------------- ------ ------- - ----------- - -------------- -- -------- - ------------ -------- --------- - -------------------- -- ----- ------ - - - ---------展开代码
在此示例中，我们将 handleEvent 方法作为监听器传递给子组件。当子组件触发事件时，父组件中的 handleEvent 方法将被调用。
provide / inject
在某些情况下，父组件可能需要向其后代多个组件传递相同的数据。为了避免在每个子组件中重复声明 props，Vue.js 提供了一个称为 provide / inject 的高级选项。通过使用 provide / inject，父组件可以提供数据以供所有后代组件使用。
例如，下面是一个父组件和两个子组件：
-- -------------------- ---- ------- ---------- ----- --------------------------------------- --------------------------------------- ------ ----------- -------- ------ ------- - -------- - -------- ------ ------- - - ---------展开代码
在此示例中，我们使用 provide 选项提供了一个名为“Message”的数据。该数据会被提供给该组件的所有后代组件。在子组件中，我们可以使用 inject 属性来访问提供的数据。
-- -------------------- ---- ------- ---------- ----- ----- ------- ------ ------ ----------- -------- ------ ------- - ------- ----------- - ---------展开代码
在此示例中，我们定义了一个名称为“message”的 inject 属性。因为我们已经在父组件中使用 provide 提供了名称为“message”的数据，所以在这些子组件中，我们在模板中即可使用 message。
总之，Vue.js 提供了多种父子组件数据传递的方式，包括 props、事件和 provide / inject。了解每种方法及其适用条件非常重要。希望本文提供了详细和有深度的学习以及指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6780b918ce7f48612546490c
