巩义网站建设托管,好看的logo图案,利用cms怎么做网站,东莞横沥网站建设vue3 组件之间传值 非常好#xff0c;为啥突然开这样一篇博文#xff0c;首先是因为 vue3 是未来发展的趋势。其次#xff0c;vue 官方已经确认#xff0c;将于2023年最后一天停止对 vue2 项目的维护#xff0c;这个是官方发出的通知#xff0c;并且呢#xff0c;尤雨溪…vue3 组件之间传值 非常好为啥突然开这样一篇博文首先是因为 vue3 是未来发展的趋势。其次vue 官方已经确认将于2023年最后一天停止对 vue2 项目的维护这个是官方发出的通知并且呢尤雨溪团队也已经将 vue3 作为了 vue 的默认版本了同时呢无论是 elementUI 和 ant-d 组件库团队也已经很早之前就发布了针对于 vue3 的组件库。接下来我们要真正的开始内卷 vue3 了家人们 前言
vue2.7 是现在也是最后一个 vue2 版本的更新官方已经发布通告vue2 版本将于 2023年12月31日 停止维护但是停止维护不代表不能使用哈我们可以继续使用 vue2 版本开发我们的项目只不过官方团队已经不会在对 vue2 版本进行更新这个更新包括了安全性和兼容性的更新修复问题。如果我们继续使用 vue2 版本开发项目的话我们可能就需要面对一个问题就是如何向用户解释你买了我们的电脑但我们给你配的是 window xp 系统。 vue3 组件通信
使用过 vue2 的兄弟们在开发项目里面最常用的东西是啥子嘞首先组件通信排第一吧牛的嘞这一节就说一下 vue3 的组件通信方式哈。
好的首先要注意一点学习这一部分的话需要用到一些其他的知识点第一个是 vue3 的基础语法可以看我之前的博文再一个就是 TypeScript当然也可以看我之前的博文。都没有问题了下面的东西就很简单了。
props 传值
在 vue2 里面可以使用 props 传值在 vue3 里面依旧可以使用但是改了个名字叫 defineProps 获取父组件传递的数据且在组件内部不需要引入 defineProps 方法就可以直接使用。
下面案例稍微讲一下哈首先我们创建一个 vue3 的项目我们编写两个组件
编写父组件
首先编写一个父组件
!-- 模板语法 --
templatep classed-father-title父组件/pdiv classed-father-con/div
/templatescript setup langts/scriptstyle scoped
.ed-father-title {margin: 10px;font-size: 25px;color: hotpink;font-weight: 550;
}.ed-father-con {height: 400px;background-color: beige;padding: 15px;
}
/style执行效果就是下面的样子 编写子组件
接下来继续开发一个组件作为子组件
templatep classed-son-title子组件/pdiv classed-son-con/div
/templatescript setup langts/scriptstyle scoped
.ed-son-title {margin: 10px;font-size: 20px;color: red;font-weight: 550;
}.ed-son-con {height: 300px;background-color: cadetblue;padding: 15px;
}
/style编写完成之后呢我们在父组件里面引入这个子组件。
父组件引入子组件
引入子组件呢就需要两个步骤就可以了首先引入子组件文件然后在 dom 上使用子组件就可以了。
!-- 模板语法 --
templatep classed-father-title父组件/pdiv classed-father-con!-- 使用子组件 --sonModel/sonModel/div
/templatescript setup langts
// 引入子组件
import sonModel from ./sonModel.vue;/scriptstyle scoped
.ed-father-title {margin: 10px;font-size: 25px;color: hotpink;font-weight: 550;
}.ed-father-con {height: 400px;background-color: beige;padding: 15px;
}
/style
然后我们看一下效果 非常棒效果已经引入进来了。
父组件向子组件传递参数
首先我们在父组件创建一个变量然后把这个变量传递给子组件让子组件接收这个变量。
父组件创建变量
父组件创建一个 num设置他的值为 10
// 创建变量
const num ref(10)父组件把值传递给子组件
然后呢我们把这个变量传递给子组件和 vue2 的方式是一样的
!-- 使用子组件 --
sonModel :numnum/sonModel这样我们就把父组件的变量传递给子组件了这里我们传递的是变量当然我们也可以直接写死传递一个常量进去
!-- 使用子组件 --
sonModel :numnum msg我是ed./sonModel好到这里应该都明白就不再赘述了。
接下来就是子组件通过 defineProps 方法获取父组件传递进来的数据同样也是很简单注意一点defineProps 方法是不需要引入的直接使用即可。
子组件接收数据方式一
let props defineProps({num: {type: Number, // 接收数据的类型default: 0 // 默认值},msg: {type: String, // 接收数据的类型default: hello // 默认值}
})OK结束了。我们看一下 没问题子组件已经有这两个数据了我们可以直接在页面上显示一下子
templatep classed-son-title子组件/pdiv classed-son-conp classed-txt父组件传递的num{{ num }}/pp classed-txt父组件传递的msg{{ msg }}/p/div
/template看一下效果 没问题可以正常使用这是子组件接受参数的第一种方式。
子组件接收数据方式二
第二种方式和第一种一样只不过不需要那么繁琐的配置简单配置也是可以的了。
// 子组件接收父组件传参方式二
let props defineProps([num, msg])这样是也是可以的效果是一模一样的只不过取消了对数据类型的限制和 vue2 其实是一样的哈 页面效果也是一样的。
自定义事件
首先呢自定义事件也是可以进行组件间传值的先说一下哈在 vue 里面嘞有两种事件一种是原生DOM事件一种是自定义事件。
原生事件
原生事件都知道的像是 click、dbclick、change、mouseenter 这些都是原生事件。
比如下面的代码
div clickdivClickFun/div给 div 标签绑定了一个原生事件 click他默认会给事件回调注入 enent 事件对象当然点击事件想注入多个参数也是可以的但是切记注入的事件对象必须叫做 $event
div clickdivClickFun(10,我是ed., $event)点击/div我们看一下打印的结果 如果我们传递的不是以 $event 命名的话我们看一下
div clickdivClickFun(10,我是ed., event)点击/div看一下打印的数据 就是 undefined 了所以注意注入的事件对象务必叫做 $event。
在 vue3 框架里面呢click、dbclick、change 这类原生DOM事件无论是在标签还是组件上面都算是原生DOM事件但是在 vue2 中不是这样的在 vue2 中组件标签上面需要通过 native 修饰符才能变成原生DOM事件这个知道就可以哈
自定义事件
自定义事件可以实现子组件给父组件传递数据在项目中是非常非常重要的也是经常使用到的。
比如最开始的案例我们在父组件引入的子组件标签上追加一个自定义事件
sonModel getDatagetDataFun :numnum msg我是ed./sonModel上面这个代码写 vue2 的应该都知道哈就不赘述了就是自己写一个自定义事件 getData 触发之后调用 getDataFun 方法。
那么怎么触发这个自定义事件 getData 呢
我们需要在子组件内部触发比如说我们在子组件内部编写一个按钮点击按钮的时候触发这个自定义事件并且传值。
子组件内部编写按钮
button clicktoFatherData()向父组件传递数据/button编写一个按钮有一个点击事件点击执行 toFatherData() 方法。
使用 defineEmits 方法
接下来我们需要了解一个新的方法叫做 defineEmits 这是 vue3 提供的一个方法不需要引入直接使用即可。这个方法需要传递一个数组进去数组的元素就是将来数组需要触发的自定义事件类型这个方法会返回一个 $emit 方法来触发自定义事件。
说的比较多看下面的代码就可以了
let $emit defineEmits([getData]);因为子组件想出发父组件的 getData 传递参数所以传递列表的数组元素就得包含这个将来可能会触发的自定义事件方法。
触发自定义方法
上面我们已经编写了一个按钮按钮带有点击事件$emit 也已经有了接下来就是触发父组件的自定义事件了接下来我们完善按钮的点击事件
// 按钮点击事件
let toFatherData () {$emit(getData, 我是子组件传递的数据, 大家好我是ed.);
}当我们点击按钮的时候事件回调内部调用 $emit 方法去触发自定义事件第一个参数为触发事件类型第二个、三个、N个参数即为传递给父组件的数据。
父组件打印子组件传递的数据
上面一个步骤呢子组件成功触发了父组件的自定义事件然后父组件自定义事件触发之后他会走一个函数我们在这个函数里面就可以获取到子组件传递回来的数据我们打印一下
// 父组件接收打印子组件传递回来的数据
const getDataFun (data: string, data2: string) {console.log(data, data2);
}我们看一下打印的结果 可以看到当子组件的按钮被点击父组件可以正常打印出子组件传递回来的数据了。
注意事项
但是注意一点哈跟上面案例没关系了看下面的代码
sonModel clickclickFun getDatagetDataFun :numnum msg我是ed./sonModelgetData 方法是一个自定义事件对吧click 方法是一个原生事件但是如果我们在子组件的 defineEmits 中定义了 click 那么click 就被定义成为自定义事件了
let $emit defineEmits([getData, click]);好的到这里 自定义事件 传递数据就结束了。
全局事件总线传值
上面我们说了使用 props 与 emit 实现父子组件之间的传值那就有一个问题如果是兄弟组件之间通信呢当然了使用 props 链也是可以的子组件1把数据传递到父组件父组件在把数据传递给子组件2。这是完全没有问题的除了复杂一些。
其实还有一种方式能够更快的实现兄弟组件之间传值那就是全局事件总线全局事件总线可以实现任意组件间的通信。
在 vue2 里面可以根据 VM 和 VC 关系推理出全局事件总线但是 vue3 里面没有 vue 构造函数也就没有 Vue.prototype. 以及组合式API没有 this 那在 vue3 里面想要实现全局事件总线功能就有些许的不现实其实在 vue3 中如果想使用全局事件总线可以采用 mitt 插件。
mitt
mitt npm 地址https://www.npmjs.com/package/mitt
这里呢就单纯的说一下怎么简单的使用哈详细的大家去上面的网站看哈。
Mitt 有啥优点呢稍微说一下就一下
零依赖体积小压缩后就200b。提供了完整的 TypeScript 的支持能自动推断参数类型。基于闭包实现没有 this 困扰。为浏览器编写但也支持其他 JavaScript 。与框架无关可以与任何框架搭配使用。
mitt 安装
安装其实也比较简单直接一行命令就可以安装完成
npm i mitt等待命令执行完成就可以了。
使用 mitt
使用的话和 vue2 的 bus 差不多我们先创建一个 EventBus.ts 文件。 在文件中创建事件总线对象并对外暴露然后就可以在使用事件总线的地方导入了。
import mitt from mitt;
export default mitt();很简单就两行代码 接下来就是在需要的组件中使用了。
使用的方式比较简单还是上面案例我们子组件直接通过 mitt 给父组件通信不用 emit 了。
子组件发送数据
首先在子组件内部引入我们上面创建的文件
import EventBus from ../utils/EventBus;然后我们重写按钮点击事件通过 mitt 给父组件传值
// 按钮点击事件
let toFatherData () {// $emit(getData, 我是子组件传递的数据, 大家好我是ed.);EventBus.emit(sendData, {name: 我是ed., age: 18})
}看上面代码EventBus.emit( type , evt ) 方法呢就是用 mitt 发送数据这个方法有两个参数一个是 type要调用的事件类型一个是 evt可以理解为传递的参数建议是对象。
好了这样的话子组件就向父组件传递了数据接下来就是父组件接受子组件传递的数据。
父组件接收数据
同样父组件需要先引入 EventBus 这个文件任何组件用到就需要引入。
import EventBus from ../utils/EventBus;引入完成父组件接收 mitt 传递的数据需要使用一个方法叫做 EventBus.on( type, handler )这个方法也需要两个参数type 是要调用的事件类型比如上面子组件发送数据的时候使用的是 sendData那么父组件如果想接收子组件发送的这个数据此处也要设置为 sendData第二个 handler 是回调函数意思是获取到数据执行什么操作该函数会有一个回调参数参数就是传递的数据
EventBus.on(sendData, (params) {console.log(mitt接收到的数据, params);
})OK上面代码就可以获取组件通过 mitt 传递的数据了但是有一点需要注意一下上面这段代码直接写在 setup 里面就行不需要通过任何操作触发当收到 sendData 类型的数据就会直接走回调。 这是子组件给父组件通过 mitt 发送数据我们只是举了一个例子来实现通过 mitt 通信其实使用 mitt 按照这个步骤可以实现任何两个组件通信比如父子组件通信兄弟组件通信祖孙组件通信都可以。
其他注意事项
上面说的只是 mitt 最基本的功能哈更多消息的功能参考我上面给出的网站。
比如说我们再在子组件写一个按钮也是给父组件发送数据但是我们的类型不是 sendData 了我们换成一个别的比如 sendData2我不细说了直接看代码
编写 html 代码 button clicktoFatherData2()向父组件传递数据2/button编写 ts 代码
// 按钮点击事件
let toFatherData2 () {EventBus.emit(sendData2, { name: 我是ed.同学, age: 24 })
}然后我们也是在父组件在追加一个监听 sendData2 类型的 mitt 接受数据
EventBus.on(sendData2, (params) {console.log(mitt接收到的数据2, params);
})我们看一下效果 点击第一个按钮打印最开始的数据点击第二个按钮打印我们新写的没有问题。
所以说哈只要我们这个 type 调用的事件类型匹配起来我们可以在一个组件里面写好多个都不影响的。
发现没我们父组件其实写了两个监听 其实 mitt 有一个可以同时监听全部调用事件类型
EventBus.on(*, (type, params) {console.log(* mitt接收到的数据, type, params);
})其实和普通监听是一样的只不过 调用事件类型的type 变成了 * 号代表监听全部。同时回调函数现在回调了两个参数 (type, params) 其中 type 代表接受到数据的调用事件类型第二个才是接受的参数我们可以看一下效果 都能打印出来很好奈斯我们写的单独监听的和全部监听的都不会有影响。
好的还有其他的方法其实那些去看文档吧一般也用不到。
好了 mitt 先说这些吧什么全局挂载全局使用这些就先不说了 需要的时候在自行百度吧。
v-model
使用 v-model 可以实现数据双向绑定除此之外呢它也可以实现父子组件之间的数据同步。
v-model 实指利用 props[modelValue] 与自定义事件 [update:modelValue] 实现的。
一个案例说明白哈其实很简单vue2 里面也有类似的实现方式vue3 只不过是把写法变了一下看下面代码
我先在父组件创建一个变量 pageNo
const pageNo ref(1)没问题哈然后把这个变量双向绑定到子组件
sonModel v-model:pageNopageNo getDatagetDataFun :numnum msg我是ed./sonModel我使用 v-model 绑定到了子组件 主要是 v-model:pageNopageNo 这段代码大体意思可以理解为我把父组件的 pageNo 传递到子组件 props 中的 pageNo 里面去。
那么子组件就可以接收父组件传进来的 pageNo 数据
let props defineProps([num, msg, pageNo])然后我们可以看一下子组件 props 里面有没有这个 pageNo。 诶子组件接受到了我们可以直接在页面渲染一下子。
p classed-txt父组件传递的pageNo{{ pageNo }}/p我们看一下可以正常使用 然后我们修改一下父组件这个数据使用 update:pageNo子组件中不能直接处理父组件传进来的数据我们这个其实是通过emit返回给父组件让他来处理
button clickupdataPageNoFun()更新pageNo {{ pageNo }}/button我们在子组件编写一个按钮按钮有点击事件点击事件我们和 emit 一样触发父组件的自定义事件
首先我们要想调用父组件的自定义事件那么我们必须在 defineEmits 中先把类型添加进来吧
let $emit defineEmits([getData, update:pageNo]);我们添加了一个 update:pageNo 进来这个是啥意思呢可以简单理解我是用update:前缀后表示我们需要更新pageNo这个数据因为是 v-model 绑定的数据父组件直接获取要更新的值给我们更新了不用在自己编写自定义事件了。
其实 v-model 的本质是属性绑定和事件绑定的结合那语法糖包一下。
然后我们完善按钮点击事件
const updataPageNoFun () {$emit(update:pageNo, props.pageNo 1);
}我们看一下效果 好的完成了就这么简单当然你一个组件绑定多个 v-model 都是可以的只需要传递的参数不一样就可以了。
useAttrs
vue3 当中可以使用 useAttrs 来进行父组件向子组件传值。他可以获取组件的属性和方法当然这包含了原生的DOM事件或者是自定义事件这个函数类似于 vue2 里面的 $attrs 属性与$listeners 方法。
下面一个案例稍微说一下哈还是之前的案例父组件引入子组件上面向子组件传递了好多数据包括自定义方法
sonModel v-model:pageNopageNo getDatagetDataFun :numnum msg我是ed./sonModel然后在子组件呢我们可以使用 useAttrs 来获取子组件上被添加的这些数据和方法我们先编写一个按钮点击按钮打印通过 useAttr 拿到的数据
button clickgetDataByUseAttrs()通过useAttrs获取数据/button接下来我们要引入一下 useAttrs
import { useAttrs } from vue;然后初始化一下
const $attrs useAttrs()然后我们通过点击按钮打印一下 $attrs 里面的数据
const getDataByUseAttrs () {console.log($attrs)
}我们看一下效果 我去什么也没有打印出来啊
sonModel v-model:pageNopageNo getDatagetDataFun :numnum msg我是ed./sonModel我们不是往子组件绑定了pageNo、num、msg 这些数据了吗怎么都没有
OK 需要注意如果defineProps接受了某一个属性useAttrs方法返回的对象身上就没有相应属性与属性值。 因为这些传进来的数据都被 defineProps 接收了所以这里 $attrs 已经没有了。defineProps 的优先级高于 $attrs 。
那我们在子组件在传几个数据
sonModel ed我是ed.同学 v-model:pageNopageNo getDatagetDataFun :numnum msg我是ed./sonModel然后我们在打印一下 诶现在就打印出来了。我们可以使用 console.log($attrs.ed) 直接打印出数据值。
同样如果挂载了方法的话也是可以获取到的
sonModel changesonChangeFun() ed我是ed.同学 v-model:pageNopageNo getDatagetDataFun :numnum msg我是ed./sonModel看一下结果 ref 与 $parent
ref
提到 ref 可能会想到它可以获取元素的DOM或者获取子组件实例的VC。既然可以在父组件内部通过ref获取子组件实例VC那么子组件内部的方法与响应式数据父组件可以使用的。
这个就比较简单了一个案例结束。
我先把之前案例代码全删掉从新写哈。
还是父组件调用子组件然后呢我在子组件创建几个变量几个方法。
script setup langtsimport { ref } from vue;const name ref(我是ed.);
const age ref(18);const changeName () {console.log(我是子组件的方法)
}/script很简单我想让父组件能够直接访问子组件的数据和方法光通过上面的代码不行
如果让父组件获取子组件的数据或者方法需要通过 defineExpose 对外暴露,因为 vue3 中组件内部的数据对外【关闭的】外部不能访问。
所以使用 defineExpose 暴露一下
script setup langtsimport { ref } from vue;const name ref(我是ed.);
const age ref(18);const changeName () {console.log(我是子组件的方法)
}defineExpose({ name, changeName })/script我就暴露了两个哈age 没有暴露然后我们在父组件写一个按钮调用一下看能不能获取到 name 和 changeName 方法。
首先在父组件我们先要获取到子组件
sonModel refsonFrom/sonModelconst sonFrom ref()然后在父组件写一个按钮点击按钮的时候我们打印一下子组件的 name 数据
button clickconData()打印子组件数据/button然后编写点击事件打印一下子组件的 name
const conData () {console.log(sonFrom.value.name);
}我们看一下效果 获取成功
调用一下子组件的方法
const conData () {console.log(sonFrom.value.name);sonFrom.value.changeName()
}看一下结果 方法也调用打印出来了。
age 没有在子组件用 defineExpose 抛出来可以获取到吗试一下哈
const conData () {console.log(sonFrom.value.name);sonFrom.value.changeName()console.log(sonFrom.value.age);
}看一下结果 好了关于 ref 就到这里了。
$parent
$parent 可以获取某一个组件的父组件实例VC因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例当然父组件的数据与方法需要通过defineExpose方法对外暴露。
哎哟他和 ref 差不多我不想写了到这里这篇博文已经写了一万三的字了好累啊
不解释了直接贴代码了哈和 ref 一样的。
父组件定义一个变量
const msg ref(hello world)defineExpose({ msg })主要是子组件写一个按钮点击按钮的时候打印父组件的数据
button clickgetMsg($parent)获取父组件的 msg 数据/button然后编写点击事件
const getMsg ($parent) {console.log($parent.msg)
}查看一下效果 成功好了到这结束了这一小节抓紧下一个。
provide 与 inject
vue3提供两个方法provide与inject可以实现隔辈组件传递参数。
这两个其实在 vue2 就是可以使用的简单点一笔带过哈
provide方法用于提供数据此方法执需要传递两个参数,分别提供数据的key与提供数据value。
比如父组件向下级组件传递数据
需要先引入provide。
import { provide, ref } from vue;然后传递数据
provide(play, 我喜欢打篮球)完成
然后是在下级组件接收上级组件传递的数据
同样也是先引入 inject
import { inject, ref } from vue;然后接收数据
let play inject(play)我们看一下有没有 哇。没问题OK结束了这小节就这样用。
pinia
这个是集中式管理状态容器类似于vuex。但是核心概念没有mutation、modules使用方式参照官网这里就不说了之前博客提过这个小菠萝。 这是我之前写的博文介绍小菠萝的 https://wjw1014.blog.csdn.net/article/details/126008933 这是小菠萝官网https://pinia.vuejs.org/zh/ 插槽
这玩意儿不想写了尽管可以传值但是和我想象的传值不是一个意思有时间单独开一个插槽的博文吧。
好了今天先到这里吧我要去玩元梦之星了。
