在现代前端开发中,Vue.js 是一个非常受欢迎的框架,其轻量、易用和灵活的特性使得它在众多项目中被广泛应用。而在实际开发中,组件间通讯是一个常见且重要的需求。今天,我们将为你揭秘 Vue3 中组件通讯的 10+ 种方法,并附上详细的示例代码,帮助你在开发中更加得心应手。
五、全局属性和方法
5. 全局属性和方法
示例代码:
// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.config.globalProperties.$globalMessage = 'Hello from Global Property';
app.config.globalProperties.$globalMethod = () => {
console.log('Global method invoked');
};
app.mount('#app');// 任意组件<template>
<div>
<p>{{ $globalMessage }}</p>
<button @click="$globalMethod">Invoke Global Method</button>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$globalMessage);
}
};</script>六、组合式 API
6. Compose APIs
示例代码:
// useCounter.js
import { ref } from 'vue';
export function useCounter() {
const count = ref(0); const increment = () => {
count.value++;
};
return { count, increment };
}// 组件A
<template>
<button @click="increment">Increment</button>
</template>
<script>
import { useCounter } from './useCounter.js';
export default {
setup() {
const { increment } = useCounter();
return { increment };
}
};
</script>// 组件B
<template>
<p>{{ count }}</p>
</template>
<script>
import { useCounter } from './useCounter.js';
export default {
setup() {
const { count } = useCounter(); return { count };
}
};
</script>七、emit 和 callback 函数
7. emit 和 callback 函数
示例代码:
// 父组件
<template>
<ChildComponent @custom-event="handleCustomEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
methods: {
handleCustomEvent(message) {
console.log(message);
}
}
};
</script>// 子组件
<template>
<button @click="sendEvent">Send Event</button>
</template>
<script>
export default {
methods: {
sendEvent() {
this.$emit('custom-event', 'Hello from Child Component');
}
}
};</script>八、自定义事件
8. 自定义事件
示例代码:
// 自定义事件总线
import { createApp } from 'vue';
export const EventHub = createApp({});// 组件A
<template>
<button @click="sendCustomEvent">Send Custom Event</button>
</template>
<script>
import { EventHub } from './eventHub.js';
export default { methods: {
sendCustomEvent() {
EventHub.config.globalProperties.$emit('customEvent', 'Hello from Component A');
}
}
};
</script>// 组件B
<template>
<p>{{ customMessage }}</p>
</template>
<script>
import { EventHub } from './eventHub.js';
export default {
data() {
return { customMessage: ''
};
},
mounted() {
EventHub.config.globalProperties.$on('customEvent', (message) => {
this.customMessage = message;
});
}
};
</script>
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表