Vue父子組件通信全面詳細(xì)介紹
更新時(shí)間：2022年10月25日 08:38:54 作者：cyg_l02
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
1.Vue父子組件通信方式
父子組件通信方式一般為props和emit組合使用，那么在不同的文件中應(yīng)該如何使用呢？
｜.vue文件和.jsx文件中有什么不同嗎？
2.不同文件間的通信方式
1 .父組件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>
2 .父組件jsx文件和子組件vue文件
// 父組件 TsxTest.tsx
// setup內(nèi)
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>
3 .父組件vue文件和子組件jsx文件
// 父組件 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>
);
},
4 .父組件jsx文件和子組件jsx文件
// 父組件 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>
);
},
3.如何實(shí)現(xiàn)
在componentEmits文件里面可以看到
// 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)
}
}
為啥modifiersKey會(huì)拼接Modifiers字符串呢？
因?yàn)樵趘Model處理時(shí)會(huì)獲取父組件傳過來的modifiers并進(jìn)行處理拼接
// vModel.ts
// 對eventName進(jìn)行處理,arg不存在則認(rèn)為是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`然后在進(jìn)行handler處理
// 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就是函數(shù)執(zhí)行，然后進(jìn)行了錯(cuò)誤處理
callWithAsyncErrorHandling(
handler,
instance,
ErrorCodes.COMPONENT_EVENT_HANDLER,
args
)
}簡單來說emit函數(shù)就是語法糖
<TsxTest value={value.value} onUpdate:value={handleUpdateValue} />
<TsxTest :value="count" @update:value="handleAppValue" />
上面兩種方式的處理函數(shù)[onUpdate:value/@update:value]都會(huì)在emit里面變成這樣
emit('update:value', count)
// 執(zhí)行emit其實(shí)就行下面的執(zhí)行
props.['onUpdate:value'](count)到此這篇關(guān)于Vue父子組件通信全面詳細(xì)介紹的文章就介紹到這了,更多相關(guān)Vue父子組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue?懸浮窗且?guī)ё詣?dòng)吸附功能實(shí)現(xiàn)demo
這篇文章主要為大家介紹了vue?懸浮窗且?guī)ё詣?dòng)吸附功能實(shí)現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue2老項(xiàng)目中node-sass更換dart-sass的操作方法
這篇文章主要介紹了vue2老項(xiàng)目中node-sass更換dart-sass的操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-07-07
X6 是 AntV 旗下的圖編輯引擎，提供了一系列開箱即用的交互組件和簡單易用的節(jié)點(diǎn)定制能力，方便我們快速搭建流程圖、DAG 圖、ER 圖等圖應(yīng)用。接下來就看看vue如何使用它2021-05-05
原生JS?Intersection?Observer?API實(shí)現(xiàn)懶加載
這篇文章主要為大家介紹了原生JS?Intersection?Observer?API實(shí)現(xiàn)懶加載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了uniapp和vue的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
vue?el-table實(shí)現(xiàn)動(dòng)態(tài)添加行和列具體代碼
最近遇到一個(gè)動(dòng)態(tài)增加行和列的需求,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue?el-table實(shí)現(xiàn)動(dòng)態(tài)添加行和列的相關(guān)資料,需要的朋友可以參考下2023-09-09
vue+el-element中根據(jù)文件名動(dòng)態(tài)創(chuàng)建dialog的方法實(shí)踐
本文主要介紹了vue+el-element中根據(jù)文件名動(dòng)態(tài)創(chuàng)建dialog的方法實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
Vue中前后端使用WebSocket詳細(xì)代碼實(shí)例
websocket通信是很好玩的,也很有用的的通信方式,下面這篇文章主要給大家介紹了關(guān)于Vue中前后端使用WebSocket的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vue3項(xiàng)目目錄結(jié)構(gòu)示例詳解
更好的了解項(xiàng)目的目錄結(jié)構(gòu),能更好的去開發(fā)項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目目錄結(jié)構(gòu)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue-router路由跳轉(zhuǎn)問題 replace
這篇文章主要介紹了vue-router路由跳轉(zhuǎn)問題 replace，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09