Vue页面传值:Props属性与$emit事件的应用介绍
2024-01-10 09:53:44
?
一、vue页面传值
在Vue页面中传值有多种方式,简单介绍以下两种
- 通过props属性传递值:父组件在子组件上定义props属性,子组件通过props接收父组件传递的值。
- 通过$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触发事件传递值方式适用于子组件向父组件传递数据的场景,可以实现双向数据传递,但需要在父组件中监听子组件的自定义事件,可能会导致代码冗余。
文章来源:https://blog.csdn.net/m0_60769905/article/details/135413217
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!