建设部网站如何登录监理工程师,建百度网站,网络科技公司网站源码,免费网站建设平台哪个好文章目录前情回顾前言1. 父组件 子组件通讯传递2. 子组件 父组件通讯传递3. 爷孙组件#xff0c;后代组件通讯数据总结前情回顾
在本专栏前一章节中#xff0c;我为大家带来了 Vue3 新特性变化上手指南 的归纳梳理#xff0c;主要介绍了 Vue3 的 Proxy 响应式原理…
文章目录前情回顾前言1. 父组件 子组件通讯传递2. 子组件 父组件通讯传递3. 爷孙组件后代组件通讯数据总结前情回顾
在本专栏前一章节中我为大家带来了 Vue3 新特性变化上手指南 的归纳梳理主要介绍了 Vue3 的 Proxy 响应式原理和 Setup Composition API的介绍以及围绕在 Setup Composition API基础上的 一些新特性 API 方法后续我会在此基础上为大家带来 Vue3 中常见的 一些 API 方法 和新特性知识点 开设单独的章节讲解。
前言
大家众所周知Vue 是一个 拥有组件化编程思想的框架整个项目程序是由一个一个的 组件块 堆积而成但是由于 每一个 组件在项目 结构上是完全独立的但是有时候我们会面临到的需求是多个组件之间需要进行数据的交互也就是说 A 组件里面的数据需要传递给 B 组件甚至也可能传递给更加嵌套深层次的 C组件D组件等… 那么在 Vue3 中 如何去 实现这些功能也就是本章节我要为大家带来的内容 同样在之前 我为大家带来过一期关于在 Vue2 中如何实现 各级组件之间数据通讯的章节讲解如果有想要了解 在Vue2 中 如何去实现组件之间的 通讯 请点击传送门 Vue2 中的 各级组件通讯
1. 父组件 子组件通讯传递
父组件中 还是和 之前 Vue2 中一样 通过在 子组件 标签上配置自定义属性来传递参数
templatediv classhomeh1我是父组件/h1h4这是将要传给子组件的数据 {{ name }}/h4HelloWorld :namedataname/HelloWorld/div
/templatescript setupimport { ref, defineProps, reactive } from vue
import HelloWorld from ../../../components/HelloWorld.vuelet name ref(你好,vue)
/script子组件中
子组件中 接收 Props 参数 Vue 提供了一个 新的 API 函数 defineProps() 其使用的方法就和我们在 Vue2 的子组件中 定义 Props 待接收参数配置一样。 这里需要注意的是如果我们需要 在 JS 模块中 用到 传递过来的参数 直接打印会报错虽然在模板中可以直接使用但是在 JS 模块中我们需要 定义一个 变量 来接收 defineProps() 的返回值然后再从返回值身上读取。
templatediv classHelloWorldh5我是子级组件/h5h4我接收到父组件的 数据 {{ namedata }}/h4/div
/templatescript setup
import { defineProps } from vue
let receiveProps defineProps({namedata: {type: String,required: true, // 是否必传default: 备用数据, //默认数据}
})
console.log(namedata); //会报错
console.log(receiveProps.namedata); //不报错/script方式二 如果 你没有 使用 script setup Vue3 的语法糖来进行 JS代码块的编写那么 Setup 函数会接收两个参数第一个参数就是组件的 Props传递过来的参数。和标准的组件一致Setup 函数的 Props 是响应式的并且会在传入新的 Props 时同步更新。
子组件
templatediv classHelloWorldh5我是子级组件/h5h4我接收到父组件的 数据 {{ props.namedata }}/h4/div
/templatescript
export default {props: {namedata: {type: String,required: true, // 是否必传default: 备用数据, //默认数据}},setup(props, context) {console.log(props.namedata, context);return {props}}
}
/script这里需要注意 如果你解构了 Props 对象解构出的变量将会丢失响应性。因此我们推荐通过 props.xxx 的形式来使用其中的 props。 如果你确实需要解构 Props 对象或者需要将某个 Prop 传到一个外部函数中并保持响应性那么你可以使用 toRefs() 和 toRef() 这两个工具函数
import { toRefs, toRef } from vue
export default {setup(props) {// 将 props 转为一个其中全是 ref 的对象然后解构const { title } toRefs(props)// title 是一个追踪着 props.title 的 refconsole.log(title.value)// 或者将 props 的单个属性转为一个 refconst title toRef(props, title)}
}2. 子组件 父组件通讯传递
子组件中: 在过去Vue 2中我们是通过 this.$emit() 添加自定义事件而在父组件中通过触发自定义事件来获得传递的参数但如今在Vue3中 为了更好的使用 组合式API Vue 已经逐渐的舍去大量的 this 指向了。所以在Setup 中我们无法访问 this 对此Vue3 同样 也为我们提供了 一个新的 API 函数 defineEmits(), 它用来定义要触发的自定义事件函数。
templatediv classHelloWorldh5我是子级组件/h5el-button typeprimary plain clickcommunication点击给 父组件传递数据/el-buttonh3{{ data }}/h3/div
/templatescript setupimport { defineProps, defineEmits, ref, reactive } from vue
let data ref(这是给父组件的数据)let emit defineEmits([transmit])let communication () {emit(transmit, data)
}
/script父组件中 : 在子组件标签体上 注册 所定义自定义事件并且 触发对应的事件函数在事件函数中接收一个参数就是子组件传递过来的数据。
templatediv classhomeh1我是父组件/h1h4接收到 子组件传给我的 数据 {{ dataname }}/h4HelloWorld transmitReceive/HelloWorld/div
/templatescript setup
import { ref, defineProps, reactive, toRef, nextTick } from vue
let dataname ref()
let Receive (data) {console.log(data);dataname.value data.value
}
/script3. 爷孙组件后代组件通讯数据
有时候当我们的组件层次嵌套过深的时候时常会遇到跨组件进行数据通讯如下图如果父组件需要传递参数给重孙组件呢。这时候上面的父子组件传参的方式已经不实用了我们也不可能去逐层收到数据再逐层进行传递对此 Vue3 也给我们 提供了两个新的 API 函数 provide() 和 inject() 用来解决这样的需求。 顶层组件中
templatediv classhomeh1我是父组件/h1h2{{ name }}/h2HelloWorld //div
/templatescript setupimport { ref, defineProps, reactive, toRef, nextTick, provide } from vueimport HelloWorld from ../../../components/HelloWorld.vuelet name ref(这是给重孙组件的数据)provide(Transferdata, name) //provide接收两个参数第一个参数为 和后面接收参数的组件约定好的一个字段名第二个参数就是要传递的参数。 /script
后代组件中
templatediv classGrandchildh5重孙组件/h5h4收到祖先组件的数据{{ Transferdata }}/h4h4{{ Transferdata }}/h4/div
/templatescript setupimport { inject } from vuelet Transferdata inject(Transferdata)/script实现 provide() 和 inject() 图例
注明以 provide() 和 inject() 这样的方式传递的数据只要在上层组件中定义好了那么无论它的后代组件嵌套多少层多么深后代组件都能够拿取到数据。 补充 如果组件间的传递 数据量过大我们更应该选用全局 状态管理库来进行数据共享管理。 点击传送门 解读 在 Vue 中如何搭建全局状态管理库
总结
以上就是本章节为大家带来的 有关在 Vue3 中如何去使用 组件间的 数据通讯方式。也认识了 几种 新的 API 函数方法。 ♂️ 博主座右铭向阳而生我还在路上 —————————————————————————————— 博主想说将持续性为社区输出自己的资源同时也见证自己的进步 —————————————————————————————— ♂️ 如果都看到这了博主希望留下你的足迹【收藏点赞✍️评论】 ——————————————————————————————
