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

更新时间：2022年06月29日 09:53:01 作者：KONG

不断把公共的、可以独立拆分出来的抽出来作为一个独立可复用的组件来向上提供调用,这样让我们的代码更加方便组织和管理,并且扩展性也更强,下面这篇文章主要给大家介绍了关于vue3组件化开发之可复用性应用的相关资料,需要的朋友可以参考下

自定义指令

指令 (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：当指令与元素解除绑定且父组件已卸载时，只调用一次。

钩子函数的一些参数：

包含两个参数el 和 binding。el 为指令绑定到的元素。这可用于直接操作 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组件化开发之可复用性应用的文章就介绍到这了,更多相关vue3可复用性应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue中video标签如何实现不静音自动播放
最近在做大屏展示需要在一开始播放引导视频,产生自动播放需求,下面这篇文章主要给大家介绍了关于Vue中video标签如何实现不静音自动播放的相关资料,需要的朋友可以参考下
2023-01-01
详解Vue底部导航栏组件
这篇文章主要介绍了Vue底部导航栏的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue中使用better-scroll实现轮播图组件
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。这篇文章主要介绍了Vue中使用better-scroll实现轮播图组件的实例代码,需要的朋友可以参考下
2020-03-03
vue使用vuedraggable插件实现拖拽效果
这篇文章主要介绍了vue使用vuedraggable插件实现拖拽效果,本文分步骤介绍了安装vuedraggable插件的方法及页面引入的方法,需要的朋友可以参考下
2024-04-04
利用vue-router实现二级菜单内容转换
这篇文章主要介绍了如何利用vue-router实现二级菜单内容转换,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
vue百度地图修改折线颜色,添加icon和文字标注方式
这篇文章主要介绍了vue百度地图修改折线颜色,添加icon和文字标注方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue watch immediate方法用法详解
这篇文章主要介绍了vue watch immediate方法用法详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-06-06
vue2实现简易时钟效果
这篇文章主要为大家详细介绍了vue2实现简易时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
Vue 2源码解析ParseHTML函数HTML模板
这篇文章主要为大家介绍了Vue 2源码解析ParseHTML函数HTML模板详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
vue单个元素绑定多个事件问题(例如点击绑定多个事件方法)
这篇文章主要介绍了vue单个元素绑定多个事件问题(例如点击绑定多个事件方法)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04