在 Vue 中，组件之间的数据传递是常见的需求。以下是常用的组件传值方法：
props
使用 props 可以从父组件向子组件传递数据，通过在子组件中定义 props 属性来接收父组件传递的数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<!-- ParentComponent.vue -->
<template>
<ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: 'Hello from parent!',
};
},
};
</script>1
2
3
4
5
6
7
8
9
10<!-- ChildComponent.vue -->
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
props: ['message'],
};
</script>$emit
子组件可以通过$emit 触发一个自定义事件，并将数据传递给父组件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14<!-- ChildComponent.vue -->
<template>
<button @click="sendMessageToParent">Send Message to Parent</button>
</template>
<script>
export default {
methods: {
sendMessageToParent() {
this.$emit('message-to-parent', 'Hello from child!');
},
},
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<!-- ParentComponent.vue -->
<template>
<ChildComponent @message-to-parent="handleMessageFromChild" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
handleMessageFromChild(message) {
console.log(message);
},
},
};
</script>provide/inject
使用 provide/inject 可以在祖先组件提供数据，然后在子孙组件中注入获取数据。
1
2
3
4
5
6
7
8<!-- AncestorComponent.vue -->
<script>
export default {
provide: {
sharedData: 'Hello from ancestor!',
},
};
</script>1
2
3
4
5
6
7
8
9
10<!-- DescendantComponent.vue -->
<template>
<p>{{ sharedData }}</p>
</template>
<script>
export default {
inject: ['sharedData'],
};
</script>
这些方法提供了灵活的方式来在 Vue 组件之间进行数据传递，开发者可以根据具体场景选择合适的方式进行组件间数据传递。