Vue中父子组件通信示例解析（props、$ref、$emit）

简介：
本文详细解析了在Vue框架下实现父子组件间通信的方法，包括使用props传递数据、通过$refs访问子组件以及利用$emit触发自定义事件。适合初学者深入理解Vue组件交互机制。 在 Vue 中实现组件间的通信是至关重要的。本段落通过 props、$ref 和 $emit 三个知识点来讲解如何进行父子组件之间的数据传递。 首先我们构建两个基础的示例组件：`father.vue` 和 `child.vue`。 父组件代码如下： ```html ``` 子组件代码如下： ```html ``` 这两个部分的代码非常清晰，父组件通过 `import` 方式引入了子组件，并在 components 属性中进行注册。这样就可以将 `` 标签嵌入到父组件模板里。 一、利用 props 实现通信 props 是 Vue 中最基础的数据传递方式之一。它允许数据单向流动：只能从父级组件流向子级，反之则不行。有两种方法可以实现 props 的传递：静态和动态。 （1）静态传递 通过在子组件中声明一个自定义属性，并且让父组件使用这个属性来传入值。 ```html ``` 然后，我们可以在子组件的模板里直接引用该 props： ```javascript // 子组件 script 部分代码示例 export default { props: [message] } ``` （2）动态传递 当需要传入的数据不是静态值时，比如表达式、布尔值或对象等复杂数据类型，则可以使用 `v-bind` 来绑定属性。 ```html ``` 其中的变量可以在父组件的数据中定义： ```javascript // 父组件 script 部分代码示例 export default { data() { return { a: 我是子组件二！, b: 1234567890, msg: 动态值 } }, } ``` 二、通过 $ref 实现通信 $ref 是 Vue 中用于在父级组件中引用子级组件实例的方法。它允许你访问到子组件的属性和方法。 （1）当使用 `$ref` 来指向一个子组件时，你可以直接获取该子组件中的定义好的数据或函数。 （2）如果 $ref 用在一个普通的 HTML 元素上，则可以用来获取对应的 DOM 节点。 三、通过 $emit 实现通信 $emit 是 Vue 中用于触发事件的方法。父级可以通过 `$emit` 触发一个自定义的事件，而子组件则能监听这个事件并作出相应的反应。 这三种方式（props, $ref 和 $emit）在父子组件间的数据传递中各有其用途和优势。通过灵活运用这些方法可以大大增加应用的功能性和可维护性。