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

 

一、vue页面传值

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

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

二、案例实践 

2.1 props属性传递值方式

父组件：

<template><div><ChildComponent :message="message" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},data() {return {message: 'Hello World!'};},
};
</script>

子组件(ChildComponent.vue)：

<template><div>{{ message }}</div>
</template><script>
export default {props: {message: {type: String,required: true,},},
};
</script>

2.2 $emit触发事件传递值

父组件：

<template><div><ChildComponent @message="handleMessage" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},methods: {handleMessage(message) {console.log(message);},},
};
</script>

子组件(ChildComponent.vue)：

<template><div><button @click="sendMessage">Send Message</button></div>
</template><script>
export default {methods: {sendMessage() {this.$emit('message', 'Hello World!');},},
};
</script>

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

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