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

目录
  • 1.Vue父子组件通信方式
  • 2.不同文件间的通信方式
    • 1 .父组件vue文件和子组件vue文件
    • 2 .父组件jsx文件和子组件vue文件
    • 3 .父组件vue文件和子组件jsx文件
    • 4 .父组件jsx文件和子组件jsx文件
  • 3.如何实现

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)

到此这篇关于Vue父子组件通信全面详细介绍的文章就介绍到这了,更多相关Vue父子组件通信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue2和Vue3的10种组件通信方式梳理

    目录 props emit attrs和listeners provide/inject parent/children expose&ref EventBus/mitt 写在最后 Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异:本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式. 其中将要实现的通信方式如下表所示: 方式 Vue2 Vue3 父传子 props props 子传父 $emit emits 父传子

  • Vue组件通信深入分析

    目录 一.组件间的通信方式分类 二.props传递数据 三.$emit 触发自定义事件 四.ref标记 五.EventBus事件总线 六.$parent 或 $root 七.vuex 八.总结 一.组件间的通信方式分类 父子组件之间的通信: 兄弟组件之间的通信: 祖孙与后代组件之间的通信: 非关系组件之间的通信. 二.props传递数据 适用场景:父组件传递数据给子组件: 子组件设置props属性,定义接收父组件传递过来的参数: 父组件在使用子组件标签中通过字面量来传递值 Person.vue

  • 一文搞懂Vue2中的组件通信

    目录 vue 组件通信方式 1.props传参 2.emit,on通信 3.$ref,$children实例通信 4.$parent通信 5.插槽通信(一般不用) 6.$attr,$listener深层双向通信 7.provide,inject依赖注入深层次单向通信 8.$bus事件总线全局通信 vue 组件通信方式 1.父组件将自己的状态分享给子组件使用: 方法:父组件通过子标签传递数据,子组件通过 props 接收 2.子组件改变父组件的状态; 方法:父组件在子标签上通过@abc 提供一个改

  • Vue组件通信之父传子与子传父详细讲解

    目录 父组件传递给子组件 浅谈Props 子组件传递给父组件 父组件传递给子组件 父组件传递给子组件:通过props属性: 子组件传递给父组件:通过$emit触发事件: 这里我们知道,父组件有一些数据需要子组件来进行展示,那我们可以通过props来完成组件之间的通信 通过props来完成组件之间的通信 浅谈Props 那么什么是Props呢? 作用:接受父组件传递过来的属性 Props是你可以在组件上注册一些自定义的attribute(属性): 父组件给这些attribute(属性)赋值,子组件

  • Vue组件通信之父传子与子传父深入探究

    目录 为什么要组件拆分 组件拆分的流程 子组件中为什么要使用defineComponent方法 父传子 父组件 子组件 子传父 子组件 父组件 provide和inject方法 传递数据的组件 子组件 孙子组件 组件通信的双向绑定 父组件 子组件 为什么要组件拆分 组件拆分的目的就是为了让我们复用代码,节省我们的代码量,把共同的功能封装到一个组件中,然后在各个组件中使用 组件拆分的流程 首先,把要拆分的数据单独拆分到一个文件中,作为子组件 在父组件中import导入子组件,components进

  • 老生常谈vue3组件通信方式

    目录 vue3七种组件通信方式 1. Props方式 2. emit方式 3. v-model方式 4.Refs 5. provide/inject 6. eventBus 7. vuex/pinia vue3七种组件通信方式 面试题经常会问到vue3组件间的通信方式,下文列举了七种常见的通信方式. props emit v-model refs provide/inject eventBus Vuex4/pinia(vuex5) 1. Props方式 父组件以数据绑定的形式声明要传递的数据,子

  • Vue父子组件通信全面详细介绍

    目录 1.Vue父子组件通信方式 2.不同文件间的通信方式 1 .父组件vue文件和子组件vue文件 2 .父组件jsx文件和子组件vue文件 3 .父组件vue文件和子组件jsx文件 4 .父组件jsx文件和子组件jsx文件 3.如何实现 1.Vue父子组件通信方式 父子组件通信方式一般为props和emit组合使用,那么在不同的文件中应该如何使用呢? |.vue文件和.jsx文件中有什么不同吗? 2.不同文件间的通信方式 1 .父组件vue文件和子组件vue文件 // 父组件 App.vue

  • vue父子组件通信的高级用法示例

    前言 vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div class="parent"> 我是父组件 <!--父组件监听子组件触发的say方法,调用自己的parentSay方法--> <!--通过:msg将父组件的数据传递给子组件--> <children :msg="msg" @s

  • 使用Vue父子组件通信实现todolist的功能示例代码

    先上代码 <body> <div id="root"> <div> <input v-model="inputValue" /> <button @click="handleClick">submit</button> </div> <ul> <todolist v-for="(item,index) of list" :ke

  • 如何用Vue实现父子组件通信

    一.父子组件的关系构成 本篇文章将要总结的是Vue中父子组件之间的通信方式. 那在vue中父子组件之间的关系是怎么构成的呢,或者说哪个组件可以称为是父组件,哪个组件又可以称为是子组件呢. 在我的理解中,父子组件的关系构成也比较简单. 使用vue-cli工具构建的项目中,我们经常会在一个组件中注册引用另外一个组件. Home.vue <template> <div class="home"> <p>这里是Home组件</p> </di

  • Vue中父子组件通信与事件触发的深入讲解

    目录 一.组件 子组件 父组件 二.父子组件通信 父组件给子组件通信 子组件向父组件通信 三.父子组件事件触发 父组件调用子组件中的事件方法 子组件调用父组件中的事件方法 四.总结 一.组件 子组件 <template> <div style="border:1px solid black;width:400px; height: 130px;"> <h3>我是子组件</h3> <button>子组件将值传递给父组件</

  • 微信小程序父子组件通信详细介绍

    组件间的基本通信方式有以下几种: WXML 数据绑定:用于父组件向子组件的指定属性设置数据. 事件:用于子组件向父组件传递数据,可以传递任意数据. 如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent() 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法. 父组件通过 properties 属性给子组件传递数据: // 父组件 home.wxml <search-input placeholderText="搜明星.达人">

  • Vue非父子组件通信详解

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有下面的几句 具体如何去实现却没有很详细的说明,于是自己试着进行了实现.先看下简单的通信效果: 就是点击了一个组件,另一个组件的数字递加. html如下: <div id="app"> <component-a></component-a> <com

  • 详解Vue 非父子组件通信方法(非Vuex)

    一提到两个非父子组件通信方法,有经验的 coder 肯定会说用 Vuex 啊,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁.当然还是要根据自己的业务场景的来决定,总之还是那句话,不要为了用 Vuex 而用 Vuex! Vue 官网介绍了非父子组件通信方法: 不过官网说的太简单了,新手看完估计还是一脸懵逼.还有这个空的 Vue 实例放到哪里合适也值得商榷. 这篇文章的目的就是用一个简单的例子让你明白如何用 Bus

  • Vue 父子组件、组件间通信

    本人对Vue组件间通信不懂,搜索了很多关于Vue 父子组件间通信介绍,下面我来记录一下,有需要了解Vue 父子组件.组件间通信的朋友可参考.希望此文章对各位有所帮助. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <meta name="viewport"

  • Vue父子组件之间的通信实例详解

    在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件.无论哪种组织方式父子组件的通信方式都是大同小异. 一.父组件到子组件通讯 父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function).vue提倡单项数据流,因

随机推荐