在Vue.js中，组件间的数据传递有多种方法，以下是六种常见的方法：
- 使用
props和$emit。 - 使用
$parent和$children。 - 使用
Vue.observable或Vuex。 - 使用
provide和inject。 - 使用
EventBus进行跨组件通信。 - 使用
slot和slot-scope。
以下是每种方法的简单示例：
- 使用
props和$emit:
<!-- ParentComponent.vue -->
<template>
<ChildComponent :childData="parentData" @child-event="handleChildEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentData: 'some data'
};
},
methods: {
handleChildEvent(payload) {
// Handle the event
}
}
};
</script>
<!-- ChildComponent.vue -->
<template>
<button @click="emitEvent">Send to Parent</button>
</template>
<script>
export default {
props: ['childData'],
methods: {
emitEvent() {
this.$emit('child-event', 'data from child');
}
}
};
</script>- 使用
$parent和$children:
<!-- ChildComponent.vue -->
<template>
<button @click="sendToParent">Send to Parent</button>
</template>
<script>
export default {
methods: {
sendToParent() {
this.$parent.parentData = 'data from child';
}
}
};
</script>- 使用
Vue.observable或Vuex:
// Store.js
import Vue from 'vue';
export const store = Vue.observable({
data: ''
});
// ComponentA.vue
<template>
<button @click="sendToStore">Send to Store</button>
</template>
<script>
import { store } from './Store';
export default {
methods: {
sendToStore() {
store.data = 'data from A';
}
}
};
</script>
// ComponentB.vue
<template>
<div>{{ store.data }}</div>
</template>
<script>
import { store } from './Store';
export default {
computed: {
dataFromStore() {
return store.data;
}
}
};
</script>- 使用
provide和inject:
<!-- GrandParentComponent.vue -->
<template>
<ParentComponent />
</template>
<script>
import ParentComponent from './ParentComponent.vue';
export default {
provide: {
grandParentData: 'data from grandParent'
},
components: {
ParentComponent
}
};
</script>
<!-- ParentComponent.vue -->
<template>
<ChildComponent />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
provide: {
parentData: 'data from parent'
},
components: {
ChildComponent
}
};
</script>
<!-- ChildComponent.vue -->
<template>