Vue父子组件通信全面详细介绍_vue.js_

// 父组件　App.vue 

// 子组件　HelloWorld.vue // script const props = defineProps<{ value: number }>(); const emit = defineEmits<{ (e: "update:value", value: number): void; }>(); const handleUpdate = () => { emit("update:value", props.value + 1); }; 

// 父组件　TsxTest.tsx // setup内 const handleUpdateValue = (count: number) => { value.value = count; emit("update:value", value.value); }; // 注意这里是onUpdate:value return () => (  ); 

// 子组件　HelloWorld.vue // script const props = defineProps<{ value: number }>(); const emit = defineEmits<{ (e: "update:value", value: number): void; }>(); const handleUpdate = () => { emit("update:value", props.value + 1); }; 

// 父组件　App.vue const count = ref(2); const handleAppValue = (value: number) => { count.value = value; }; 

// 子组件　TsxTest.tsx // script props: { value: { type: Number, default: 1, }, }, emits: ["update:value"], setup(props, { emit }) { const handleUpdateValue = () => { emit("update:value", props.value + 1); }; return () => ( 
{props.value}
 ); }, 

// 父组件　TsxParent const value = ref(1); const handleUpdateValue = (count: number) => { value.value = count; }; 

// 子组件　TsxTest.tsx // script props: { value: { type: Number, default: 1, }, }, emits: ["update:value"], setup(props, { emit }) { const handleUpdateValue = () => { emit("update:value", props.value + 1); }; return () => ( 
{props.value}
 ); }, 

// componentEmits.ts // rawArgs就是emit('update:value', count)的count值 let args = rawArgs const isModelListener = event.startsWith('update:') //　双向绑定的name比如update:value那么就是后面的value值 const modelArg = isModelListener && event.slice(7) if (modelArg && modelArg in props) { const modifiersKey = `${ modelArg === 'modelValue' ? 'model' : modelArg }Modifiers` // 是否有modifiersKey比如trim/number const { number, trim } = props[modifiersKey] || EMPTY_OBJ if (trim) { args = rawArgs.map(a => a.trim()) } if (number) { args = rawArgs.map(toNumber) } } 

// vModel.ts // 对eventName进行处理,arg不存在则认为是onUpdate:modelValue const eventName = arg ? isStaticExp(arg) ? `onUpdate:${arg.content}` : createCompoundExpression(['"onUpdate:" + ', arg]) : `onUpdate:modelValue` const modifiersKey = arg ? isStaticExp(arg) ? `${arg.content}Modifiers` : createCompoundExpression([arg, ' + "Modifiers"']) : `modelModifiers`

// componentEmits.ts 接上 let handlerName let handler = // toHandlerKey就行处理evnet变成on${capitalize(str)} props[(handlerName = toHandlerKey(event))] || // also try camelCase event handler (#2249) props[(handlerName = toHandlerKey(camelize(event)))] // for v-model update:xxx events, also trigger kebab-case equivalent // for props passed via kebab-case if (!handler && isModelListener) { handler = props[(handlerName = toHandlerKey(hyphenate(event)))] } if (handler) { // callWithAsyncErrorHandling就是函数执行，然后进行了错误处理 callWithAsyncErrorHandling( handler, instance, ErrorCodes.COMPONENT_EVENT_HANDLER, args ) }

emit('update:value', count) // 执行emit其实就行下面的执行 props.['onUpdate:value'](count)