本篇内容介绍了“如何用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 做一个映射。
props:{
type:String
}
因为 HTML 的 attribute的只能是字符串，除了基础类型(Boolean、Number) Vue 在映射时会帮忙做类型转换，其他复杂类型则需要设置到 DOM property 上。
事件
在自定义元素中，通过 this.$emit或在 setup中的 emit发出的事件会被调度为原生 CustomEvents。附加的事件参数 (payload) 会作为数组暴露在 CustomEvent 对象的 details property 上。
插槽
编写组件时，可以想 vue 一样，但是使用时只能原生的插槽语法，所以也不在支持作用域插槽。
子组件样式问题
使用子组件嵌套的时，有个坑的地方就是默认不会将子组件里的样式抽离出来。
父组件
{{ title }}
.title {
padding: 10px;
background-color: #eee;
font-weight: bold;
}
子组件
{{ title }}
.childer {
padding: 10px;
background-color: #222;
color: #fff;
font-weight: bold;
}
可以看到子组件的样式没有插入进去，但是样式隔离的标识是有生成的 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”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
网站名称：如何用Vue3构建WebComponents
文章链接：
http://cdxtjz.cn/article/gscodi.html
