vue3学习
文章平均质量分 66
高级白嫖工程师
我不是码神
展开
-
optionsAPI与compositionAPI
1、区别optionsAPI:vue2中使用的是optionsAPI,来定义一个组件内部的一些属性,如methods、data等等;其缺点往往会在大项目中体现出来,比如一个简单的计数器功能,可能需要在methods内部书写一部分逻辑,在computed内部也书写一部分逻辑,那么问题来了:如果该组件内部有n个这样的小功能,那么此时代码逻辑是十分分散的,并且后期迭代维护面临的问题也是可能修改一个需求需要在不同的属性内部反复查找相关的代码,而compositionAPI的出现就是为了解决这一问题的。co原创 2022-02-11 13:40:49 · 4773 阅读 · 2 评论 -
Mixin的使用
在组件化开发中,难免会有部分组件内部的部分逻辑是相同的,为了方便减少代码量,vue提供了混入(Mixin)的功能。局部混入:首先需要抽取要混入的内容,单独的放到某一个文件,通过导出的方式被其他组件引用。demoMixin.jsexport const demoMixin = { // 混入导出的文件中 可以书写vue实例下的所有属性 data methods等等 data(){ return { msg:'我是通过混入实现的信息!' } },原创 2022-01-18 13:26:36 · 1218 阅读 · 0 评论 -
自定义表单组件多个v-model实现
与自定义表单组件的单个v-model很类似,只不过要绑定多个时,需要在使用v-model时通过v-model:attrName=xxxx的形式指定绑定哪个值到子组件内部哪个组件。同样的,子组件中计算属性触发的自定义事件也需要以update:attrName的形式指定。(单个值绑定参考: 自定义组件双向绑定单个值.)假设有App父组件,在该组件内部使用了peanutInput这个子组件,同时在该子组件上双向绑定两个值:App.vue<template> <h1>自定义组件原创 2022-01-13 06:30:00 · 670 阅读 · 0 评论 -
vue自定义组件的v-model
vue对于原生的表单元素都支持v-model进行双向绑定,同样的,自定义组件也可以使用v-model实现双向绑定(这个个人觉得主要用于自定义组件内部存在表单元素时用的比较多)。对于原生表单元素比如input<input v-model="peantText"></input>vue内部帮我们实现双向绑定的原理如下:<input :value="peantText" @input="inputChange($event.target.value)"></i原创 2022-01-12 22:00:32 · 1933 阅读 · 1 评论 -
vue3中异步组件的使用
vue3的异步组件主要依靠defineAsyncComponent来实现。<template> <AsyncComponent/></template><script> import { defineAsyncComponent } from "vue"; // 使用defineAsyncComponent方法 定义异步组件 const AsyncComponent = defineAsyncComponent( {原创 2021-12-31 13:30:25 · 923 阅读 · 0 评论 -
vue3动态组件与keep-alive
动态组件主要是依靠一个isattribute来实现;需要显示动态组件的位置就是要component标签;keep-alive标签(vue内置组件 )可以缓存动态组件; 可以在keep-alive组件上使用以下的属性指定缓存机制:include - string | RegExp | Array。只有名称匹配的组件会被缓存。exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存。max - number | string。最多可以缓存多少组件实例。.原创 2021-12-30 14:06:56 · 711 阅读 · 0 评论 -
vue3中作用域插槽的使用
vue3的作用域插槽,在我们封装高级组件时,依靠其灵活的slot,可以帮助我们拓展组件的多样性。首先得搞清楚作用域插槽,简而言之就是:父组件只能访问在父组件中编译的内容,子组件只能访问子组件中的内容;假设我们有一个需求,在App.vue中有一个数组需要通过一个子组件来显示,同时我们还希望显示内容的标签可以自定义,也就是说可以用div、span或者其他任何html标签,如何实现呢?当然是插槽。看下面的例子:假设有两个组件,App.vue和SlotComponent.vue要实现上面的需求,可以像这样原创 2021-12-29 22:13:34 · 1981 阅读 · 0 评论 -
vue3事件总线---依赖于mitt实现
vue3移除了vue2原有的on、on、on、emit,因此事件总线推荐使用第三方库实现,详情参考官方文档,这里主要记录使用mitt的实现。安装mittnpm i mitt --save创建事件总线文件import mitt from 'mitt';export const emitter = mitt(); // 返回值是一个对象/*也就是说 emitter中一共包含以下几个属性方法:on:为给定类型注册事件处理程序;====》 emitter.on('type',(...a原创 2021-12-28 13:55:48 · 1141 阅读 · 0 评论 -
vue3中非父子组件传值
vue2中非父子组件的传值主要是通过事件总线,创建一个vue实例,通过在不同的组件中导入该实例来实现非父子组件之间的通信行为。vue3提供了**provide**和**inject**属性,可以实现非父子组件之间的通信;假设有三个组件:App.vue(父级)、sub1(子级)、sub2(子级的子级):App.vue<template> <div style="border: 1px solid pink"> <h1>我是你爹</h1>原创 2021-12-27 23:04:47 · 1068 阅读 · 0 评论 -
Vue3中子自定义事件传值的验证
vue3自定义事件原创 2021-12-27 22:03:05 · 1112 阅读 · 0 评论