![](https://img-blog.csdnimg.cn/direct/2c55837071184a1ab415dfe24bb45f0b.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue3学习
文章平均质量分 59
如双向绑定,父子组件通信,组件动态渲染等。
我爱加班、、
这个作者很懒,什么都没留下…
展开
-
vue3 实现自定义指令封装 --- 通俗易懂
1.1 在<script setup>定义组件内的指令,任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令。原创 2024-06-04 15:27:50 · 912 阅读 · 1 评论 -
vue3封装echarts组件---通俗易懂
如果在vue项目中有多个组件或者同个组件多出地方需要不同的图表,因此自己封装一个方便多次复用的Mycharts图表组件。使用: :style="{ transform: `scale(${scale})` }"这样你就成功封装好了一个echarts图表组件并成功使用啦!2.1 安装echarts。原创 2024-06-03 17:25:58 · 1092 阅读 · 1 评论 -
vue3:插槽、具名插槽、条件插槽、作用域插槽、具名作用域插槽 一次性搞清楚 --- 通俗易懂
2、封装button组件,通过slot插槽传入按钮名称。以上就是插槽的使用,源码里面有注释说明。原创 2024-05-31 11:16:14 · 728 阅读 · 0 评论 -
vue3二次封装elementPlus的dialog弹窗组件
01、只暴露提供一个入口函数————openDialog(),保持组件内部封闭性;02、数据交互尽量通过 openDialog() 方法来传递,减少外部状态依赖,固定的配置项参数才考虑用 props。原创 2024-05-30 09:19:24 · 607 阅读 · 2 评论 -
vue3 组件的动态渲染 <component :is=“componentTag“ />
不引入shallowRef跳过proxy代理的话会报警告。首先创建父组件.vue文件和两个子组件A、B文件,并引入。通过整理组件名到一个变量,再用:is渲染。通过isShow来切换显示A、B组件。默认显示childC组件,点击切换就显示对应组件。点击切换按钮,就会切换显示A、B组件。2、整理要渲染的组件 --案例。原创 2024-05-29 14:42:10 · 822 阅读 · 1 评论 -
vue3项目使用pinia状态管理器----通俗易懂
以上就是pinia的vue3使用,后面更新持续化存储和actions里发异步请求。我这里是index,js。1、首先安装pinia。原创 2024-05-27 17:29:48 · 906 阅读 · 0 评论 -
vue3父子组件、跨级组件之间的通信之provide, inject -- 通俗易懂
另外,父组件中如果爷添加点击事件触发改变state.count,那么子孙组件中通过inject接收的响应式数据count也会跟着自减。此处本组件触发点击事件后,count的数据会增加,爷组件中的响应式数据state也会发生改变,也会跟着增加。当组件之间的跨度比较大时,用父子孙之间的通信需要层层传递,不优雅,也不方便传值和更新。以上就是组件之间通过provide、inject的方式通信,是不是很方便。此方法适用于父子组件之间、爷孙组件之间的通信且高效。原创 2024-05-23 10:05:02 · 190 阅读 · 0 评论 -
vue3父子组件通信,子组件修改父组件传过来的值
父组件调用子组件Child1时通过 :msg2= "msg2"把msg2的数据传给子组件,并且通过自定义事件接收子组件的emit通知,用来修改父组件的msg2数据。子组件通过defineProps接收一下msg2 ,可以直接展示在模板上,子组件自定义emit事件去通知父组件修改msg2的数据,数值是子组件传过去的。子组件也先通过defineProps接收一下num,并展示。父组件调用子组件时,通过v-model:num="num" 的方式传值给子组件。三、父组件调用子组件时,通过v-model传多个值。原创 2024-05-22 16:09:12 · 1336 阅读 · 2 评论