快捷導(dǎo)航

vue3組件化開發(fā)之可復(fù)用性的應(yīng)用實(shí)例詳解

更新時(shí)間：2022年06月29日 09:53:01 作者：KONG

不斷把公共的、可以獨(dú)立拆分出來的抽出來作為一個(gè)獨(dú)立可復(fù)用的組件來向上提供調(diào)用,這樣讓我們的代碼更加方便組織和管理,并且擴(kuò)展性也更強(qiáng),下面這篇文章主要給大家介紹了關(guān)于vue3組件化開發(fā)之可復(fù)用性應(yīng)用的相關(guān)資料,需要的朋友可以參考下

自定義指令

指令 (Directives) 是帶有 v- 前綴的特殊 attribute。

v-text v-show v-if ... 等是 vue 中內(nèi)置的一些指令，當(dāng)這些內(nèi)置指令無法滿足我們的要求時(shí)，這時(shí)候也可以使用自定義指令。

基本結(jié)構(gòu)

const app = Vue.createApp({})
// 注冊(cè)一個(gè)全局自定義指令
app.directive('loading', {
  mounted(el, binding) {},
  updated(el, binding) {},
  // ...
})

一個(gè)自定義指令對(duì)象可以提供以下的鉤子函數(shù)：

created：在綁定元素的 attribute 或事件監(jiān)聽器被應(yīng)用之前調(diào)用。在指令需要附加在普通的 v-on 事件監(jiān)聽器調(diào)用前的事件監(jiān)聽器中時(shí)，這很有用。
beforeMount：當(dāng)指令第一次綁定到元素并且在掛載父組件之前調(diào)用。
mounted：在綁定元素的父組件被掛載后調(diào)用。
beforeUpdate：在更新包含組件的 VNode 之前調(diào)用。
updated：在包含組件的 VNode 及其子組件的 VNode 更新后調(diào)用。
beforeUnmount：在卸載綁定元素的父組件之前調(diào)用
unmounted：當(dāng)指令與元素解除綁定且父組件已卸載時(shí)，只調(diào)用一次。

鉤子函數(shù)的一些參數(shù)：

包含兩個(gè)參數(shù)el 和 binding。el 為指令綁定到的元素。這可用于直接操作 DOM。binding包含以下對(duì)象：

instance：使用指令的組件實(shí)例。
value：傳遞給指令的值。例如，在 v-my-directive="1 + 1" 中，該值為 2。
oldValue：先前的值，僅在 beforeUpdate 和 updated 中可用。無論值是否有更改都可用。
arg：傳遞給指令的參數(shù)(如果有的話)。例如在 v-my-directive:foo 中，arg 為 "foo"。
modifiers：包含修飾符(如果有的話) 的對(duì)象。例如在 v-my-directive.foo.bar 中，修飾符對(duì)象為 {foo: true，bar: true}。
dir：一個(gè)對(duì)象，在注冊(cè)指令時(shí)作為參數(shù)傳遞。

動(dòng)態(tài)指令傳遞參數(shù)：

v-mydir:[t]="val" //傳遞了t參數(shù)

t的值可以通過鉤子函數(shù)的參數(shù)binding.arg獲取到，val的值通過binding.value獲取到。

自定義 v-loading 指令

先編寫一個(gè)LoadingIcon.vue組件，內(nèi)容是加載中的樣式。

<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>

創(chuàng)建一個(gè)js文件src/directives/loading.js，導(dǎo)出自定義指令的對(duì)象：

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) {

	},
};

根據(jù)用戶傳給指令的參數(shù)，動(dòng)態(tài)設(shè)置提示文字：

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

指令綁定的值變化時(shí)，設(shè)置顯示或隱藏loading：

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

全局注冊(cè)自定義指令：

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">
          一些內(nèi)容...
        </div>
</template>

<script setup>
const showLoading = ref(true);
const tipsLoading = ref("請(qǐng)稍后");
const close = () => {
  showLoading.value = !showLoading.value;
}
</script>

插件

插件是自包含的代碼，通常向 Vue 添加全局級(jí)功能。它可以是公開 install() 方法的 object，也可以是 function。

每當(dāng)插件被添加到應(yīng)用程序中時(shí)，如果它是一個(gè)對(duì)象，就會(huì)調(diào)用 install 方法。如果它是一個(gè) function，則函數(shù)本身將被調(diào)用。在這兩種情況下，它都會(huì)收到兩個(gè)參數(shù)：由 Vue 的 createApp 生成的 app 對(duì)象和用戶傳入的選項(xiàng)。

基本結(jié)構(gòu)

導(dǎo)出一個(gè)對(duì)象，里面包含 install 方法。

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

使用插件：

在使用 createApp() 初始化 Vue 應(yīng)用程序后，通過調(diào)用 use() 方法將插件添加到應(yīng)用程序中。

const app = createApp(App);

app.use(plugin);

實(shí)現(xiàn)一個(gè)全局狀態(tài)管理插件

在小型項(xiàng)目中，使用vuex 全局狀態(tài)管理工具，容易讓代碼變得冗余復(fù)雜，那如果還需要全局的狀態(tài)管理，這時(shí)候就可以自己通過插件的方式實(shí)現(xiàn)一個(gè)mini版本的全局狀態(tài)管理。

新建minstore.js

import { reactive } from 'vue';

const state = reactive({
  str: '字符串',
});

const minstore = {
  state,
};

export default {
  install: (app) => {
    app.provide('minstore', minstore);
  },
};

main.js安裝這個(gè)插件：

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 傳送

先來看一個(gè)案例：

        <div style="position: relative;">
          <div class="model" style="position:absolute">模態(tài)框</div>
        </div>

內(nèi)層模態(tài)框的定位，是相對(duì)于父級(jí)的，如果想讓它相對(duì)于body定位在全局彈出模態(tài)框的話，實(shí)現(xiàn)起來可能很麻煩。

Teleport 提供了一種干凈的方法，允許我們控制在 DOM 中哪個(gè)父節(jié)點(diǎn)下渲染了 HTML。

使用 <teleport> 及 to 屬性，讓Vue “將這個(gè) HTML 傳送到body標(biāo)簽下。

        <div style="position: relative;">
          <teleport to='body'>
            <div v-show="showModel" class="model" style="position:absolute">模態(tài)框</div>
          </teleport>
        </div>

此時(shí)，HTML被插入到body標(biāo)簽下，模態(tài)框的定位就相對(duì)于body標(biāo)簽。