持续创作，加快生长！这是我参与「日新计划 6 月更文挑战」的第6天，点击查看活动概况

可复用性也是组件化开发的一个优势，能让代码愈加简练高雅html个人网页完整代码、便利保护。下面主要写了vue3中能体现出复用性的一些API的运用。

自定义指令

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

v-text v-show v-if … 等是 vue 中内置的一些指令，当这些内置指令无git命令法满意咱们的要求时，这时候也能够运用自定义指令。

根本结构

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

一个自定义指令目标能够供给以下的钩子函数：仓鼠寿命

created：在绑定元素的 attribute 或事情监听器被运用之前调用。在指令apple需求附加在普通的v-on事情监听器调用前的事情监听器中时，这很有用。
beforeMount：当指令第长沙市疫情最新情况一次绑定到元素并且在挂初始化电脑时出现问题未进行更改载父组件之前调github用。
mounted：在绑定元素的父组件被挂载HTML后调用。
beforeUpdate：在更新包括组件的 VNode 之前调用。
updated：在包括组件的 VNode及其子组件的 VNode更新后调用。
beforeUnmount：在卸载绑定元素的父组件之前调用
unmounted：当指令与元素免除绑定且父组件已卸载时，只调html标签用一次。

钩子函数的一些参数：

包括两个参数el 和 binding。el 为指令绑定到的元素。这可用于直接操作 DOM。binding包括以下目标：

instance：运用指令的组件html实例。
value：传递给指令的值。例如，在v-my-directivhtmle="1 + 1"中，该值为2。
oldValue：先前的值，仅在beforeUpdate和updated中可用。不管html文件怎么打开值是否有更改都可用。
arg：传递给指令的参数(假如有的话)。例如在v-my-directive:appearancefoo中，arg 为"foo"。
modifiehtml文件怎么打开rs：包括辰时是几点修饰符(假如有的话) 的目标。例如在v-my-directive.foo.bar中，修饰符目标为{foo: true，bar: true}。
dir：一个目标，在注册指令时作为参数传递。

动态指令传递参数：

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

t的值能够经过钩子函数的参数binding.arg获取到，val的值经过binding.value获取到git命令。

自定义 v-loading 指令

先编写一个Loadin初始化磁盘gIcon.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);

运用 vappearance-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 增加git命令大局级功用。它能够是揭露appearanceinstall()办法的object，也能够是function。

每逢插件被增加到运用程序中gitlab时，假如它是一个目标，就会调用install办法。假如它是一个function，则函数自html身将被调用。在这两种情况下，它都会收到两个参数：由 Vue 的createApp生成的app目标和用户传入的选项。

根本结构

导出一个目标html标签，里边包括 instgithub永久回家地址alhtml标签属性大全l 办法。

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

运用插件：

在运用createApp()初始化 Vue 运用程序后，经过调用use()办法将插件增加到运用程序中。

const app = createApp(App);
app.use(plugin);

完成一个大局状况办理插件

在小型项目中，运用vuex 大局状况办理工具，容易让代码变得冗余杂乱，那假如还需求大github中文官网网页局的状况办理，这长沙市疫情最新情况时候就能够自己经过插件的方式完成一个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>

TelepGitort 传送

先来看一个事例：

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

内层模态框的定位，是相对于父级的，假如想让它相对于body定位在大局弹出模态框的话，完成起APP来可能很麻烦。

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组件化开发之可复用性的应用

自定义指令

根本结构

自定义 v-loading 指令

插件

根本结构

完成一个大局状况办理插件

TelepGitort 传送

相关链接

作者信息

vue3组件化开发之可复用性的应用

自定义指令

根本结构

自定义 v-loading 指令

插件

根本结构

完成一个大局状况办理插件

TelepGitort 传送

相关链接

相关文章

Android进阶宝典 — AMS启动App进程原理分析

SwitchHosts – 开发人员必备的跨平台hosts管理工具

【兔年创意投稿】兔兔的奇妙之旅（八）协力同心，众志成城&&Git基本配置及代码提交

提效 80%，你期待的开发者工作流！(多图预警)

作者信息