在Vue 3中,有多种方法可以进行组件之间的传值。下面是一些常用的方法:
- Props:通过在父组件中使用
v-bind
指令将数据传递给子组件。在子组件中,使用props
选项接收传递的数据。
<!-- 父组件 -->
<template>
<child-component :message="message"></child-component>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue 3!'
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message']
}
</script>
- Provide / Inject:通过在父组件中使用
provide
选项提供数据,然后在子组件中使用inject
选项注入数据。
<!-- 父组件 -->
<template>
<child-component></child-component>
</template>
<script>
import { provide } from 'vue';
export default {
setup() {
provide('message', 'Hello Vue 3!');
}
}
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const message = inject('message');
return { message };
}
}
</script>
- Emit:通过在子组件中使用
$emit
方法触发自定义事件,然后在父组件中使用v-on
指令监听该事件。
<!-- 父组件 -->
<template>
<child-component @custom-event="handleEvent"></child-component>
</template>
<script>
export default {
methods: {
handleEvent(data) {
console.log(data); // 处理子组件传递的数据
}
}
}
</script>
<!-- 子组件 -->
<template>
<button @click="$emit('custom-event', 'Hello from child!')">Click me</button>
</template>
- Provide / Inject(Composition API):与上述的Provide / Inject类似,但在Composition API中使用
provide
和inject
函数来提供和注入数据。
<!-- 父组件 -->
<template>
<child-component></child-component>
</template>
<script>
import { provide, ref } from 'vue';
export default {
setup() {
const message = ref('Hello Vue 3!');
provide('message', message);
}
}
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const message = inject('message');
return { message };
}
}
</script>
这些方法提供了不同的传值方式,可以根据具体的需求选择适合的方法。无论是使用Props还是Provide / Inject,都能实现组件之间的数据传递。