Vue页面传值：Props属性与$emit事件的应用介绍

 

一、vue页面传值

在Vue页面中传值有多种方式，简单介绍以下两种

1. 通过props属性传递值：父组件在子组件上定义props属性，子组件通过props接收父组件传递的值。
2. 通过$emit触发事件传递值：子组件通过$emit方法触发一个自定义事件，并传递需要传递的值给父组件。

二、案例实践 

2.1 props属性传递值方式

父组件：

子组件(ChildComponent.vue)：

2.2 $emit触发事件传递值

父组件：

子组件(ChildComponent.vue)：

这两种方式都可以实现在Vue页面间传值，具体使用哪种方式取决于你的需求和组件间的关系。

• 通过props属性传递值方式适用于父组件向子组件传递数据的场景，可以直接传递数据，简洁方便，但数据传递是单向的。
• 通过$emit触发事件传递值方式适用于子组件向父组件传递数据的场景，可以实现双向数据传递，但需要在父组件中监听子组件的自定义事件，可能会导致代码冗余。