vue3组件化开发之可复用性的应用实例详解

vue3组件化开发之可复用性的应用实例详解

目录

自定义指令

基本结构

自定义 v-loading 指令

插件

基本结构

实现一个全局状态管理插件

Teleport 传送

相关链接

总结

可复用性也是组件化开发的一个优势,能让代码更加简洁优雅、方便维护。下面主要写了vue3中能体现出复用性的一些API的应用。

自定义指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。

v-text v-show v-if ... 等是 vue 中内置的一些指令,当这些内置指令无法满足我们的要求时,这时候也可以使用自定义指令

基本结构 const app = Vue.createApp({}) // 注册一个全局自定义指令 app.directive('loading', { mounted(el, binding) {}, updated(el, binding) {}, // ... })

一个自定义指令对象可以提供以下的钩子函数

created:在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时,这很有用。

beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用。

mounted:在绑定元素的父组件被挂载后调用。

beforeUpdate:在更新包含组件的 VNode 之前调用。

updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用。

beforeUnmount:在卸载绑定元素的父组件之前调用

unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次。

钩子函数的一些参数

包含两个参数elbindingel 为指令绑定到的元素。这可用于直接操作 DOM。binding包含以下对象:

instance:使用指令的组件实例。

value:传递给指令的值。例如,在 v-my-directive="1 + 1" 中,该值为 2

oldValue:先前的值,仅在 beforeUpdate 和 updated 中可用。无论值是否有更改都可用。

arg:传递给指令的参数(如果有的话)。例如在 v-my-directive:foo 中,arg 为 "foo"

modifiers:包含修饰符(如果有的话) 的对象。例如在 v-my-directive.foo.bar 中,修饰符对象为 {foo: true,bar: true}

dir:一个对象,在注册指令时作为参数传递。

动态指令传递参数

v-mydir:[t]="val" //传递了t参数

t的值可以通过钩子函数的参数binding.arg获取到,val的值 通过binding.value获取到。

自定义 v-loading 指令

先编写一个LoadingIcon.vue组件,内容是加载中的样式。

<template> <div class="k_loading_mask"> <div class="loading-icon"> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> <path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"> </path> </svg> </div> <div class="tips">{{ tips }}</div> </div> </template> <script setup> import { ref } from 'vue'; const tips = ref("加载中"); </script> <style lang="scss"> .loading-icon { width: 30px; height: 30px; color: #fff; svg { animation: rotating 2s linear infinite; display: inline-block; width: 100%; height: 100%; } } .k_loading_mask { width: 100%; height: 100%; background-color: rgba(0, 0, 0, .6); display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 1000; } .tips { color: #fff; } </style>

创建一个js文件src/directives/loading.js,导出自定义指令的对象:

export default { mounted(el, binding) { // 插入元素 const app = createApp(LoadingIcon); const instance = app.mount(document.createElement("div")); el.instance = instance; el.appendChild(el.instance.$el); el.style.position = "relative"; }, updated(el, binding) { }, };

根据用户传给指令的参数,动态设置提示文字:

mounted(el, binding){ // ... // 提示文字 if (binding.arg) { el.instance.tips = binding.arg; } }

指令绑定的值变化时,设置显示或隐藏loading:

updated(el, binding) { if (!binding.value) { el.removeChild(el.instance.$el); } else { el.appendChild(el.instance.$el); } },

全局注册自定义指令:

const app = createApp(App); import loading from "./directives/loading.js"; app.directive("loading",loading);

使用 v-loading 指令:

<template> <div v-loading="showLoading" class="loading-box"></div> <div v-loading:[tipsLoading]="showLoading" class="loading-box2"> 一些内容... </div> </template> <script setup> const showLoading = ref(true); const tipsLoading = ref("请稍后"); const close = () => { showLoading.value = !showLoading.value; } </script> 插件

插件是自包含的代码,通常向 Vue 添加全局级功能。它可以是公开 install() 方法的 object,也可以是 function

每当插件被添加到应用程序中时,如果它是一个对象,就会调用 install 方法。如果它是一个 function,则函数本身将被调用。在这两种情况下,它都会收到两个参数:由 Vue 的 createApp 生成的 app 对象和用户传入的选项。

基本结构

导出一个对象,里面包含 install 方法。

export default { install: (app, options) => { // ... } }

使用插件

在使用 createApp() 初始化 Vue 应用程序后,通过调用 use() 方法将插件添加到应用程序中。

const app = createApp(App); app.use(plugin); 实现一个全局状态管理插件

在小型项目中,使用vuex 全局状态管理工具,容易让代码变得冗余复杂,那如果还需要全局的状态管理,这时候就可以自己通过插件的方式实现一个mini版本的全局状态管理。

新建minstore.js

import { reactive } from 'vue'; const state = reactive({ str: '字符串', }); const minstore = { state, }; export default { install: (app) => { app.provide('minstore', minstore); }, };

main.js安装这个插件:

import minstore from './minstore/minstore.js'; const app = createApp(App); app.use(minstore).mount('#app');

组件中使用minstore

const minstore = inject('minstore'); console.log(minstore.state); <p>{{ minstore.state.str }}</p> Teleport 传送

先来看一个案例:

<div style="position: relative;"> <div class="model" style="position:absolute">模态框</div> </div>

内层模态框的定位,是相对于父级的,如果想让它相对于body定位在全局弹出模态框的话,实现起来可能很麻烦。

Teleport 提供了一种干净的方法,允许我们控制在 DOM 中哪个父节点下渲染了 HTML。

使用 <teleport>to 属性,让Vue “将这个 HTML 传送body标签下。

<div style="position: relative;"> <teleport to='body'> <div v-show="showModel" class="model" style="position:absolute">模态框</div> </teleport> </div>

此时,HTML被插入到body标签下,模态框的定位就相对于body标签。

相关链接

vue3组件化开发常用API

代码demo地址 github.com/kongcodes/v…

从0开始vue3项目搭建

总结

到此这篇关于vue3组件化开发之可复用性应用的文章就介绍到这了,更多相关vue3可复用性应用内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    设置白天指令|切换白天模式的指令

    设置白天指令|切换白天模式的指令,,1. 切换白天模式的指令泰拉瑞亚的白天想要挑强调调就是时间,想要调到白天的话,第一个你要去点击设置当中

    csgo高手快捷键|csgo快捷键指令

    csgo高手快捷键|csgo快捷键指令,,1. csgo快捷键指令反恐精英全球攻势游戏中,死亡竞赛的回合时间60分钟:mp_roundtime 60,休闲/竞技模式的每局

    dota2打电脑指令|dota1打电脑指令

    dota2打电脑指令|dota1打电脑指令,,1. dota1打电脑指令你打电脑Ai 首先就是模式-ap 全英雄选择-rd 随机英雄征召选择-random 就是给你随机

    电脑cpu指令大全|电脑cpu指令集

    电脑cpu指令大全|电脑cpu指令集,,电脑cpu指令集CPU芯片是微机硬件系统的核心,又称微处理器芯片,其中包括控制器、运算器和寄存器组。1、控制

    速度编写快捷键|如何编写快捷指令

    速度编写快捷键|如何编写快捷指令,,1. 如何编写快捷指令在使用手机时,如果想要使用快捷指令,该如何操作呢?下面来看看。方法/步骤1/4 在手机

    ping快捷键怎么按|ping指令快捷键

    ping快捷键怎么按|ping指令快捷键,,1. ping指令快捷键两种操作方法,本质都一样,就是一个使用快捷键,一个不使用快捷键。这里讲一下使用快捷键

    csgo电脑等级|csgo电脑等级指令

    csgo电脑等级|csgo电脑等级指令,,csgo电脑等级指令如图:竞技匹配等级另外还有每打一局都加经验的那个等级是满级为40,满了之后可兑换赛季纪