\u5b50\u7ec4\u4ef6<\/p>\n\n\n\n
<template>
<div>this is childComponent {{ title }}<\/div>
<\/template>
<script setup lang=\"ts\">
\/\/ \u5e38\u89c4
defineProps({
title:String
})
\/\/ \u5e38\u89c4\u8bbe\u7f6e\u9ed8\u8ba4\u503c
defineProps({
title:{
type:String,
default:\"\u9ed8\u8ba4\u503c\"
}
})
\/\/ TS\u8bed\u6cd5
defineProps<{
title:string
}>()
\/\/ TS\u8bbe\u7f6e\u9ed8\u8ba4\u503c
withDefaults(defineProps<{
title:string,
arr:number[]
}>(),{
arr:()=>[1,2,3]
})
<\/script><\/code><\/pre>\n\n\n\n\u7236\u7ec4\u4ef6<\/p>\n\n\n\n
<template>
<div> this is app<\/div>
<HelloWorld title=\"name\"><\/HelloWorld>
<\/template>
<script setup lang=\"ts\">
import HelloWorld from \".\/components\/HelloWorld.vue\"
<\/script><\/code><\/pre>\n\n\n\n
\n\n\n\n\u5b50\u7ec4\u4ef6\u5411\u7236\u7ec4\u4ef6\u4f20\u503c<\/h2>\n\n\n\n
\u5b50\u7ec4\u4ef6<\/p>\n\n\n\n
<template>
<div>this is childComponent<\/div>
<button @click=\"handleClick\">click<\/button>
<\/template>
<script setup lang=\"ts\">
const emit = defineEmits(['on-click'])
const handleClick = ()=>{
emit('on-click',\"\u8fd9\u662f\u5b50\u7ec4\u4ef6\u7684\u4f20\u503c\")
}
\/\/ TS\u5199\u6cd5
const emit = defineEmits<{
(e:\"on-click\",name:string):void
}>();
const handleClick = ()=>{
emit('on-click',\"\u8fd9\u662f\u5b50\u7ec4\u4ef6\u7684\u4f20\u503c\")
}
<\/script><\/code><\/pre>\n\n\n\n\u7236\u7ec4\u4ef6<\/p>\n\n\n\n
<template>
<div> this is app<\/div>
<HelloWorld @on-click=\"getChildData\"><\/HelloWorld>
<\/template>
<script setup lang=\"ts\">
import HelloWorld from \".\/components\/HelloWorld.vue\";
const getChildData = (data:string)=>{
console.log(data);
}
<\/script><\/code><\/pre>\n\n\n\n
\n\n\n\n\u4f9d\u8d56\u6ce8\u5165 provide \/ inject \u65b9\u5f0f<\/h2>\n\n\n\n
\u7236\u7ec4\u4ef6<\/p>\n\n\n\n
<template>
<HelloWorld><\/HelloWorld>
<\/template>
<script setup lang=\"ts\">
import {ref,provide} from \"vue\";
import HelloWorld from \".\/components\/HelloWorld.vue\"
const data = ref(\"\u7236\u7ec4\u4ef6\u7684provide\u4f20\u503c\")
provide(\"data\",data)
<\/script><\/code><\/pre>\n\n\n\n\u5b50\u7ec4\u4ef6<\/p>\n\n\n\n
<template>
<h2>this is childComponent {{ data }}<\/h2>
<\/template>
<script setup lang=\"ts\">
import { inject,Ref, ref } from 'vue'
const data = inject('data',ref(\"\"))
\/\/\u4f7f\u7528\u6cdb\u578b
const data = inject<Ref<string>>(\"data\",ref(\"\"))
<\/script><\/code><\/pre>\n\n\n\n\u6ce8\u610f: \u4f7f\u7528 provide \u548c inject \u4f20\u53c2\u5b50\u7ec4\u4ef6\u53ef\u4ee5\u76f4\u63a5\u4fee\u6539, \u5176\u4ed6\u7ec4\u4ef6\u4e5f\u4f1a\u540c\u6b65\u66f4\u66f4\u65b0<\/p><\/blockquote>\n\n\n\n
\n\n\n\n\u5144\u5f1f\u7ec4\u4ef6\u4f20\u503c<\/h2>\n\n\n\n\u81ea\u5b9a\u4e49 eventBus \u4f20\u53c2<\/h3>\n\n\n\n
\u521b\u5efa lib\/eventBus.ts<\/p>\n\n\n\n
type EventHandler = (data?: any) => void;
export default class EventBus {
private events: Record<string, EventHandler[]> = {};
\u200b
public emit(eventName: string, data?: any): void {
if (this.events[eventName]) {
this.events[eventName].forEach((fn) => {
fn(data);
});
}
}
public on(eventName: string, fn: EventHandler): void {
this.events[eventName] = this.events[eventName] || [];
this.events[eventName].push(fn);
}
public off(eventName: string, fn: EventHandler): void {
if (this.events[eventName]) {
for (let i = 0; i < this.events[eventName].length; i++) {
if (this.events[eventName][i] === fn) {
this.events[eventName].splice(i, 1);
break;
}
}
}
}
}<\/code><\/pre>\n\n\n\n\u5728 main.ts \u4e2d\u914d\u7f6e<\/p>\n\n\n\n
import { createApp } from 'vue'
import '.\/style.css'
import App from '.\/App.vue'
import EventBus from \".\/lib\/eventBus.ts\";
const $bus = new EventBus();
const app = createApp(App)
app.config.globalProperties.$bus = $bus;
app.mount('#app')<\/code><\/pre>\n\n\n\n\u5728\u7ec4\u4ef6A\u4e2d\u8bbe\u7f6e emit<\/p>\n\n\n\n
<template>
<h1>this is comA<\/h1>
<button @click=\"handleClick\">click<\/button>
<\/template>
<script setup lang=\"ts\">
import {getCurrentInstance} from \"vue\"
let {proxy}:any = getCurrentInstance();
const handleClick = ()=>{
proxy.$bus.emit(\"update\",\"\u4f20\u53c2\")
}
<\/script><\/code><\/pre>\n\n\n\n\u5728\u7ec4\u4ef6B \u4e2d\u63a5\u6536\u4f20\u53c2<\/p>\n\n\n\n
<template>
<h1>this is comB<\/h1>
<\/template>
<script setup lang=\"ts\">
import {getCurrentInstance} from \"vue\"
let {proxy}:any = getCurrentInstance();
proxy.$bus.on(\"update\",(data:any)=>{console.log(data);})
<\/script><\/code><\/pre>\n\n\n\n\u4f7f\u7528\u7b2c\u4e09\u90a3\u65b9 mitt \u4f20\u53c2<\/h3>\n\n\n\n\u539f\u7406\u5c31\u662f eventBus<\/p><\/blockquote>\n\n\n\n
\u5b89\u88c5<\/h3>\n\n\n\nyarn add mitt<\/code><\/pre>\n\n\n\n\u521b\u5efa src \/ types \/ mitt.d.ts \u5b58\u653e mitt \u7684\u7c7b\u578b\u58f0\u660e\u6587\u4ef6<\/p>\n\n\n\n
declare module 'mitt' {
type EventHandler<T = any> = (event?: T, ...args: any[]) => void;
type WildcardEventHandler<T = any> = (type: string | symbol, event?: T, ...args: any[]) => void;
type MittEmitter<T = any> = {
on(type: string | symbol, handler: EventHandler<T>): void;
off(type: string | symbol, handler: EventHandler<T>): void;
emit(type: string | symbol, event?: T, ...args: any[]): void;
};
type MittAllEmitter<T = any> = {
on(type: string | symbol, handler: EventHandler<T>): void;
on(handler: WildcardEventHandler<T>): void;
off(type: string | symbol, handler: EventHandler<T>): void;
off(handler: WildcardEventHandler<T>): void;
emit(type: string | symbol, event?: T, ...args: any[]): void;
};
function mitt<T = any>(all?: boolean): MittEmitter<T> | MittAllEmitter<T>;
export default mitt;
}<\/code><\/pre>\n\n\n\n\u5728 main.ts \u4e2d<\/p>\n\n\n\n
import { createApp } from 'vue'
import '.\/style.css'
import App from '.\/App.vue'
import mitt from 'mitt'
const $bus = mitt();
const app = createApp(App)
app.config.globalProperties.$bus = $bus;
app.mount('#app')<\/code><\/pre>\n\n\n\n\u4f7f\u7528\u540c\u4e0a\u4e00\u8282\u7684 eventBus \u4f7f\u7528\u65b9\u6cd5<\/p>\n","protected":false},"excerpt":{"rendered":"
\u7236\u5b50\u7ec4\u4ef6\u4f20\u503c \u5b50\u7ec4\u4ef6 \u7236\u7ec4\u4ef6 \u5b50\u7ec4\u4ef6\u5411\u7236\u7ec4\u4ef6\u4f20\u503c \u5b50\u7ec4\u4ef6 \u7236\u7ec4\u4ef6 \u4f9d\u8d56\u6ce8\u5165 provide \/ inject […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[64],"tags":[],"class_list":["post-702","post","type-post","status-publish","format-standard","hentry","category-vue3"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=702"}],"version-history":[{"count":2,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/702\/revisions"}],"predecessor-version":[{"id":704,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/702\/revisions\/704"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}