学习vue3第十三节(组件之间传参通讯:props/$emit/$on/provide/inject/$attrs/$parent/pinia)

本文主要是介绍学习vue3第十三节(组件之间传参通讯:props/$emit/$on/provide/inject/$attrs/$parent/pinia),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

常用的通讯方式有如下方式

  1. props
  2. 自定义事件 $emits $on
  3. provide/inject
  4. $refs | $parent | $children | defineExpose()
  5. $attrs 祖孙传值
  6. vuex | pinia

1、父子组件之间使用 props 传参

父组件向子组件传递参数,参数可以是Object、Object[]、Array、String、Number、Boolean、Function等多种数据类型的参数。
如:通过reactive 创建一个person 响应式对象,在子组件中通过 personSon对象接收数据;

父组件:

<template>
<div class="myComponents"><!-- 组件之间传参 --><MyComParamsSon :personSon="person" :name="name"@changeNameSon="changeName"></MyComParamsSon>
</div>
</template>
<script setup>
import MyComParamsSon from './myComParamsSon.vue';
import { ref, reactive } from 'vue';
let name = ref('Andy')
let person = reactive({name: 'Andy',age: 18
})
const changeName = (data) => {person.name = data
}
</script>

子组件:
子组件中接受参数,建议vue3 中直接使用setup 语法糖下的difineProps 宏函数
注意:一定要声明接受数据的数据类型,避免传入的数据类型不是子组件想要的,从而导致子组件报错
如:
difineProps 不用引入,可以直接在setup 语法糖中使用;不建议使用 setup() {return} 函数处理;

const props = defineProps({name: {type: String,default: '未知'},personSon: {type: Object,default: () => ({})}
})
或者ts写法
// const propsTs = defineProps<{
//   name: string,
//   personSon: {
//     name: string,
//     age: number
//   }
// }>()

具体代码如下:

<template>
<div class="son-page">This is a child page.<br>name: {{ name }}<br>personSon-name: {{ personSon.name }}<br>personSon-age: {{ personSon.age }}<br>newPerson: {{newPerson.name}}<br><el-button type="primary" @click="handleChangeName">change name</el-button>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
// 建议在setup 中直接使用defineProps 和 defineEmits;
//
// const props = defineProps(['name', 'person']) // 不建议使用这种,这种没有进行类型声明,传入时会导致未知问题
// 推荐使用js 中
const props = defineProps({name: {type: String,default: '未知'},personSon: {type: Object,default: () => ({})}
})
let newPerson = ref({name: 'default Name',age: 15
})
// ts
// const propsTs = defineProps<{
//   name: string,
//   personSon: {
//     name: string,
//     age: number
//   }
// }>()
const emit = defineEmits(['changeNameSon'])
// ts 中使用
// const emit = defineEmits<{
//   (e:'changeNameSon', msg:string):void
// }>()
const handleChangeName = () => {emit('changeNameSon', 'Andy 二货')newPerson.value.name = personSon.person.name
}
</script>

2、子组件向父组件传参 $emit $on

子组件向父组件传递参数或者触发事件时候,通常使用 $emit('事件名称', 参数)触发事件, 参数可有可无,
在vue3 中可以直接使用 defineEmits 宏函数处理,

建议使用:

<script setup lang='ts'>// 这里difineemits 中的事件名称需要与 emit 触发的事件名称保持一致const emit = defineEmits(['changeNameSon'])const handleChangeName = () => {emit('changeNameSon', 'Andy 二货')newPerson.value.name = personSon.person.name}// ts 中使用// const emits = defineEmits<{//   (e:'changeNameSon', msg:string):void// }>()// const emits = defineEmits<{//   changeNameSon: [msg: String] // 具名元组语法// }>()
</script>
在父组件中使用v-on绑定事件: 简写 @changeNameSon="changeName"
如:
<MyComParamsSon :personSon="person" :name="name"@changeNameSon="changeName"
></MyComParamsSon>

详细代码,请看上面的父子传参代码

3、祖孙后代之间传参 provide/inject

通常使用于父子之间传参;
vue2 中通常使用eventBus实现,但是在vue3中,使用provide/inject,已经抛弃eventBus了

详情查看第11节 provide/inject 详细介绍

4、$refs $parent $children 父子之间传参,事件触发

vue3中已废弃 $children 链式调用;
vue3 中建议直接使用setup 语法糖,在setup语法糖中可以直接使用 defineExpose() 宏函数,代替选项式API中的 expose

而在使用$refs 或者 $parent 进行链式调用时候,需要先在本组件中使用defineExpose 宏函数,
将对应的属性方法暴露出来;

如下图
父组件:

<template><div class="myComponents"><MyComParamsSon :name="name"@changeNameSon="changeName"ref="sonRef"></MyComParamsSon></div>
</template>
<script setup>
import MyComParamsSon from './myComParamsSon.vue';
import { ref, reactive, onMounted } from 'vue';
// 声明一个ref 引用,注意名称需要与dom 结构中的名称保持一致,用于调用子组件的属性方法
const sonRef = ref('sonRef')
let name = ref('Andy')
const changeName = (data) => {person.name = data
}
// 若想在子组件中通过 $parent 获取父组件中的属性方法,则同样需要现在 父组件中使用 defineExpose 来暴露
// 父组件暴露的属性和方法,在子组件中通过 $parent 获取
defineExpose({name
})
onMounted(() => {//  sonRef.value 获取子组件通过defineExpose 暴露的属性方法console.log('--', sonRef.value.newPerson)
})
</script>

子组件:

<template>
<div class="son-page" >This is a child page.<br><el-button type="primary" @click="handleChangeParents($parent)">change parents</el-button>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const sonRef1 = ref('sonRef1')// 推荐使用js 中
const props = defineProps({name: {type: String,default: '未知'},personSon: {type: Object,default: () => ({})}
})let newPerson = ref({name: 'default Name',age: 15
})const emits = defineEmits(['changeNameSon'])
const handleChangeName = () => {emits('changeNameSon', 'Andy 二货')newPerson.value.name = props.personSon.name
}// 使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例,不会暴露任何在 <script setup> 中声明的绑定。
// 即如果想要通过链式获取组件的属性、方法,就需要在子组件中通过 defineExpose进行暴露
defineExpose({newPerson, // 暴露的属性handleChangeName // 暴露的方法,父组件可以调用
})const handleChangeParents = (parent) => {子组件通过 传入的$parent 获取父组件中通过 defineExpose 暴露的属性方法console.log('==parent=', parent.name)
}
onMounted(() => {console.log('=sonRef1=', sonRef1)
})
</script>

5、$attrs 子组件中读取父组件的参数

$attrs 用于获取父组件向下级组件传递的属性,不包含下级组件 defineProps 中声明的属性,具有属性透传性;多用于祖孙组件之间的属性传递;
而这种方案不需要通过 defineExpose 宏函数来暴露;

父组件

<template>
<div class="myComponents" ref="parentRef"><!-- 组件之间传参 --><MyComParamsSon :personSon="person" :name="name":job="job" // job 参数没有在子组件 props 中声明@changeNameSon="changeName"ref="sonRef"></MyComParamsSon>
</div>
</template>
<script setup>
import MyComParamsSon from './myComParamsSon.vue';
import { ref, reactive, onMounted } from 'vue';
const sonRef = ref('sonRef')
// console.log('=sonRef==', sonRef)
let name = ref('Andy')
let person = reactive({name: 'Andy',age: 18
})
let job = ref('躺平工程师')const changeName = (data) => {person.name = data
}
onMounted(() => {console.log('--', sonRef.value.newPerson)
})
</script>

子组件:

<template>
// 第一种方案,一定要使用v-bind="$attrs", 进行绑定
<div class="son-page" ref="sonRef1" v-bind="$attrs" >This is a child page.<!-- 第二种方式,点击事件获取 --><el-button type="primary" @click="handleChangeParents($parent, $attrs)">change parents</el-button><br><!-- 子组件中不使用,job而孙子组件中需要使用时 --><GrandSon :job="attrs.job"></GrandSon>
</div>
</template>
<script setup>
import { ref, onMounted, useAttrs } from 'vue'
import GrandSon from './myComParamsGrandSon.vue'
const sonRef1 = ref('sonRef1')// 推荐使用js 中
const props = defineProps({name: {type: String,default: '未知'},personSon: {type: Object,default: () => ({})}
})let newPerson = ref({name: 'default Name',age: 15
})const emits = defineEmits(['changeNameSon'])
const handleChangeName = () => {emits('changeNameSon', 'Andy 二货')newPerson.value.name = props.personSon.name
}const handleChangeParents = (parent, $attrs) => {<!-- 第二种方案获取 attrs 中的属性 -->console.log('==parent=', parent.name, $attrs)
}
<!-- 第一种方案获取 attrs 中的属性 -->
const attrs = useAttrs()
onMounted(() => {console.log('=sonRef1=', sonRef1, attrs)// console.log('=$attrs=', $attrs)
})
</script>

孙子组件:
先在DOM 上绑定 v-bind="$attrs",再在setup 中引入 import { useAttrs } from 'vue',
获取 attrs 中没有在props 中声明的属性

<template>
<div class="grand-son" @click="getGrandParentsAttr($attrs)" v-bind="$attrs">孙子组件中的job:{{ job }} // 躺平工程师<br>
</div>
</template>
<script setup>
import { ref, computed, onMounted, useAttrs } from 'vue'
let job = ref('默认值')
const getGrandParentsAttr = (attrs) => {console.log('==attrs=', attrs)
}
const attrs = useAttrs()
onMounted(() => {console.log('==useAttrs=', useAttrs())job.value = attrs.job
})
</script>

6、vuex | pinia 状态管理,多层级之间传递参数,

若项目相对负责,页面应用嵌套多,建议使用;单页面应用,简单的功能建议使用props 和 $emits 实现,
后续章节会专门介绍 pinia;

以上仅仅代表自己的理解,如有差错,欢迎批评指正

这篇关于学习vue3第十三节(组件之间传参通讯:props/$emit/$on/provide/inject/$attrs/$parent/pinia)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/868906

相关文章

Olingo分析和实践之OData框架核心组件初始化(关键步骤)

《Olingo分析和实践之OData框架核心组件初始化(关键步骤)》ODataSpringBootService通过初始化OData实例和服务元数据,构建框架核心能力与数据模型结构,实现序列化、URI... 目录概述第一步:OData实例创建1.1 OData.newInstance() 详细分析1.1.1

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

C# 比较两个list 之间元素差异的常用方法

《C#比较两个list之间元素差异的常用方法》:本文主要介绍C#比较两个list之间元素差异,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 使用Except方法2. 使用Except的逆操作3. 使用LINQ的Join,GroupJoin

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.