一、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触发事件传递值方式适用于子组件向父组件传递数据的场景，可以实现双向数据传递，但需要在父组件中监听子组件的自定义事件，可能会导致代码冗余。
