Vue父子组件通信全面详细介绍
作者:cyg_l02 发布时间:2024-06-05 09:21:16
标签:vue,父子组件通信
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就是函数执行,然后进行了错误处理
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)
// 执行emit其实就行下面的执行
props.['onUpdate:value'](count)
来源:https://blog.csdn.net/cyg_l02/article/details/127411872


猜你喜欢
- 目录一、安装与配置二、定义模型三、生成模型四、访问Django Admin五、操作数据六、最后一、安装与配置Djongo的项目官方地址为:h
- 借助 org.springframework.ui.Model 对象或 Map 对象将信息传到 springmvc 的页面中需要:jstl
- 最近肺炎的发展速度属实有点恐怖。刚知道python的pyecharts这个库,想到pyecharts可视化的特点,正好可以扒一下肺炎实时播报
- 前几天和一个小伙伴交流了一下nodejs中epoll和处理请求的一些知识,今天简单来聊一下nodejs处理请求的逻辑。我们从listen函数
- 最近在使用tensorflow进行网络训练的时候,需要提取出别人训练好的卷积核的部分层的数据。由于tensorflow中的tensor和py
- 在工作中,我们经常会写出这种代码:import MHeader from '../../components/m-header/m-
- 一、下载git可以官网下载,傻瓜步骤安装就行下载好之后需要在idea中配置git,在File》settings》version Contro
- Celery是一个异步的任务队列(也叫做分布式任务队列),一个简单,灵活,可靠的分布式系统,用于处理大量消息,同时为操作提供维护此类系统所需
- Bulk 方式进行目标数据的Load,是Informatica提供的一种高性能的Load数据方式。它利用数据库底层机制,依靠调用数据库本身提
- Python中字符串前面我们经常看到加r(R)或u/(U)的前缀,而这两个符号是什么意思呢?1.r(R)r意为raw,表示不包含转义字符的原
- 图片版PDF无法复制,转化成文字版的PDF后使用更方便. 我们需要用到python3.6,pypdf2,ghostscript,Python
- 在判断列表是否为空时,你更喜欢哪种方式?决定因素是什么?在 Python 中有很多检查列表是否是空的方式,在讨论解决方案前,先说一下不同方法
- 最近有个朋友提到如何使用sql来删除一个字段中部分内容,于是就写了这篇文章,简单记过:测试表如下:CREATE TABLE `t` (&nb
- 读写文件首先看一个例子:f = open('thefile.txt','w') #以写方式打开,
- 学生信息系统提示:python编写的学生成绩管理系统,包括8个功能和打包教程一、功能界面 def menum():
- 上次看到别人说写一个类似支付宝支付密码的输入框效果,今天就想自己写了试试看,大体功能是实现了。已实现部分: 1. 焦点会随着输入数值往后推移
- 可能各位朋友看到这个标题很不解,到底什么是习惯化,什么又是去习惯化?下面我来慢慢介绍我的个人理论。习惯化:随着对刺激的熟悉,人们越来越注意不
- 1 修改默认目录最近刚刚开始学习Python,比较好的一个IDE就是jupyter Notebook。可以一个cell一个cell的显示结果
- 在tensorflow中,默认指定占用所有的GPU,如需指定占用的GPU,可以在命令行中:export CUDA_VISIBLE_DEVIC
- 主要应用了argsort()函数,函数原型:numpy.argsort(a, axis=-1, kind='quicksort