vue父子组件之间的通信（Vue父子组件通信全面详细介绍）

// 父组件　App.vue <HelloWorld :value="count" @update:value="handleAppValue" />

// 子组件　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); }; </script> <template> <div @click="handleUpdate">{{ value }}</div> </template>

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

// 子组件　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); }; </script> <template> <div @click="handleUpdate">{{ value }}</div> </template>

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

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

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

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

// 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 ) }

<TsxTest value={value.value} onUpdate:value={handleUpdateValue} /> <TsxTest :value="count" @update:value="handleAppValue" />

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

声明：本站所有文章











，如无特殊说明或标注 
  
  
  
  
  
 ，均为本站原创发布
  
  
  
  
  
  。任何个人或组织
  
  
  
  
  
  ，在未征得本站同意时
 


 


 


 


 


 

，禁止复制
  
  
  
  
  
  、盗用  
  
  
  
  
  
、采集
 


 


 


 


 


 

、发布本站内容到任何网站
 
 
 
 
 
 、书籍等各类媒体平台  
  
  
  
  
  
。如若本站内容侵犯了原著者的合法权益 
 
 
 
 
 
，可联系我们进行处理
 


 


 


 


 


 

。