欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue父子組件通信全面詳細介紹

 更新時間：2022年10月25日 08:38:54   作者：cyg_l02  
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數據，即可實現父組件向子組件通信，文章通過圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下

1.Vue父子組件通信方式

父子組件通信方式一般為props和emit組合使用，那么在不同的文件中應該如何使用呢？

｜.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內
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.如何實現

在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會拼接Modifiers字符串呢？

因為在vModel處理時會獲取父組件傳過來的modifiers并進行處理拼接

// 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`

然后在進行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就是函數執(zhí)行，然后進行了錯誤處理
  callWithAsyncErrorHandling(
    handler,
    instance,
    ErrorCodes.COMPONENT_EVENT_HANDLER,
    args
  )
}

簡單來說emit函數就是語法糖

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

上面兩種方式的處理函數[onUpdate:value/@update:value]都會在emit里面變成這樣

emit('update:value', count)
// 執(zhí)行emit其實就行下面的執(zhí)行
props.['onUpdate:value'](count)

到此這篇關于Vue父子組件通信全面詳細介紹的文章就介紹到這了,更多相關Vue父子組件通信內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論