如何用Vue3構建Web Components

本篇內容介紹了“如何用Vue3構建Web Components”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

構建 Web Components

vue 提供了一個 defineCustomElement 方法，用來將 vue 組件轉換成一個擴展至HTMLElement的自定義函數構造函數，使用方式和 defineComponent 參數api基本保持一致。

import { defineCustomElement } from 'vue' 

const MyVueElement = defineCustomElement({
  // 在此提供正常的 Vue 組件選項
  props: {},
  emits: {},
  template: `...`,

  // defineCustomElement 獨有特性: CSS 會被注入到隱式根 (shadow root) 中
  styles: [`/* inlined css */`]
})

// 注冊 Web Components
customElements.define('my-vue-element', MyVueElement)

如果需要使用單文件，需要 @vitejs/plugin-vue@^1.4.0 或 vue-loader@^16.5.0 或更高版本工具。如果只是部分文件需要使用，可以將后綴改為 .ce.vue 。若果需要將所有文件都構建 Web Components 可以將 @vitejs/plugin-vue@^1.4.0 或 vue-loader@^16.5.0 的 customElement 配置項開啟。這樣不需要再使用 .ce.vue 后綴名了。

屬性

vue 會把所有的的 props 自定義元素的對象的 property 上，也會將自定義元素標簽上的 attribute 做一個映射。

<com-demo type="a"></com-demo>

props:{
  type:String
}

因為 HTML 的 attribute 的只能是字符串，除了基礎類型(Boolean、Number) Vue 在映射時會幫忙做類型轉換，其他復雜類型則需要設置到 DOM property 上。

事件

在自定義元素中，通過 this.$emit 或在 setup 中的 emit 發出的事件會被調度為原生 CustomEvents。附加的事件參數 (payload) 會作為數組暴露在 CustomEvent 對象的 details property 上。

插槽

編寫組件時，可以想 vue 一樣，但是使用時只能原生的插槽語法，所以也不在支持作用域插槽。

子組件樣式問題

使用子組件嵌套的時，有個坑的地方就是默認不會將子組件里的樣式抽離出來。

父組件

<template>
    <div>{{ title }}</div>
    <Childer />
</template>
<script>
import Childer from "./childer.vue"
export default {
    components: { Childer },
    data() {
        return {
            title: "父組件"
        }
    },
}
</script>
<style scoped>
.title {
    padding: 10px;
    background-color: #eee;
    font-weight: bold;
}
</style>

子組件

<template>
    <div>{{ title }}</div>
</template>
<script>
export default {
    data() {
        return {
            title: "子組件"
        }
    },
}
</script>
<style scoped>
.childer {
    padding: 10px;
    background-color: #222;
    color: #fff;
    font-weight: bold;
}
</style>

可以看到子組件的樣式沒有插入進去，但是樣式隔離的標識是有生成的 data-v-5e87e937。不知道vue官方后續會不會修復這個bug

查看組件是可以看到，子組件的樣式是有被抽離出來的，這樣就只需要自己注入進去了。

將子組件樣式抽離插入到父組件里，參考這個的實現

import ComDemo from '~/demo/index.vue'

const deepStylesOf = ({ styles = [], components = {} }) => {
    const unique = array => [...new Set(array)];
    return unique([...styles, ...Object.values(components).flatMap(deepStylesOf)]);
}
// 將子組件樣式插入到父組件里
ComDemo.styles = deepStylesOf(ComDemo)

!customElements.get('com-demo') && customElements.define('com-demo', defineCustomElement(ComDemo))

完美解決子組件樣式問題

方法

defineCustomElement 構建的組件默認是不會將方法掛到 customElement 上的，看 Vue 源碼中，只有 _def（構造函數），_instance（組件實例)）。如果想調用組件內的方法，dom._instance.proxy.fun()，感覺實在不太優雅。

我們當然希望我們組件暴露的方法能像普通dom那樣直接 dom.fun() 去掉用，我們對 defineCustomElement 稍作擴展。

import { VueElement, defineComponent } from 'vue'

const defineCustomElement = (options, hydate) => {
    const Comp = defineComponent(options);
    class VueCustomElement extends VueElement {
        constructor(initialProps) {
            super(Comp, initialProps, hydate);
            if (Comp.methods) {
                Object.keys(Comp.methods).forEach(key => {
                    // 將所有非下劃線開頭方法 綁定到 元素上
                    if(!/^_/.test(key)){
                        this[key] = function (...res) {
                            if (this._instance) {
                                // 將方法thi改為 組件實例的proxy
                                return Comp.methods[key].call(this._instance.proxy, ...res)
                            } else {
                                throw new Error('未找到組件實例')
                            }
                        }
                    }
                })
            }
        }
    }
    VueCustomElement.def = Comp;
    return VueCustomElement;
}

undefined

“如何用Vue3構建Web Components”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！