Web Components est le nom collectif d'un ensemble d'API Web natives qui permettent aux développeurs de créer des éléments personnalisés réutilisables.
Le principal avantage de l'utilisation d'éléments personnalisés est qu'ils peuvent être utilisés dans n'importe quel environnement frame ou même non-frame. Ils sont idéaux lorsque vous ciblez des utilisateurs finaux susceptibles d'utiliser une pile technologique frontale différente, ou lorsque vous souhaitez dissocier l'application finale des détails d'implémentation des composants qu'elle utilise.
Vue et les composants Web sont des technologies complémentaires, et Vue offre un excellent support pour l'utilisation et la création d'éléments personnalisés. Dans une application Vue, vous pouvez intégrer des éléments personnalisés et vous pouvez également utiliser Vue pour créer et publier des éléments personnalisés.
Vue a obtenu un score de 100 % au test Custom Elements Everywhere. L'utilisation d'éléments personnalisés dans une application Vue a fondamentalement le même effet que l'utilisation d'éléments HTML natifs, mais nécessite une configuration supplémentaire pour fonctionner : dans ce cas, Vue traitera d'abord toutes les balises HTML non natives comme des composants Vue, et « rendra un élément personnalisé ». " comme option de secours. Cela entraînera l'envoi par Vue d'un avertissement « Échec de l'analyse du composant » pendant le développement.
Pour faire savoir à Vue qu'un élément spécifique doit être traité comme un élément personnalisé et ignorer l'analyse des composants, nous pouvons spécifier l'option compilerOptions.isCustomElement, définie sur cet objet d'options La valeur sera utilisée lors de la compilation du modèle dans le navigateur et affectera tous les composants de l'application configurée.
Alternativement, ces options peuvent être remplacées composant par composant via l'option compilerOptions (avec une priorité plus élevée pour le composant actuel).
Comme il s'agit d'une option au moment de la compilation, l'outil de build doit transmettre la configuration à @vue/compiler-dom :
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => ({
...options,
compilerOptions: {
// 将所有带 ion- 的标签名都视为自定义元素
isCustomElement: tag => tag.startsWith('ion-')
}
}))
}
}// vite.config.js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue({
template: {
compilerOptions: {
// 将所有带短横线的标签名都视为自定义元素
isCustomElement: (tag) => tag.includes('-')
}
}
})
]
}// src/main.js // 仅在浏览器内编译时才会工作 const app = createApp(App) app.config.compilerOptions.isCustomElement = (tag) => tag.includes('-')
in, et lorsque la clé existe, il préférera définir la valeur sur Propriétés. des objets DOM. Cela signifie que, dans la plupart des cas, vous n'avez pas besoin de réfléchir à ce problème si votre élément personnalisé suit les meilleures pratiques recommandées. in< /code> la vérification a échoué). Dans ce cas, vous pouvez forcer l'utilisation d'une liaison <code>v-bind et définir les propriétés de l'objet DOM via le modificateur .prop : <my-element :user.prop="{ name: 'jack' }"></my-element>
<!-- 等价简写 -->
<my-element .user="{ name: 'jack' }"></my-element>Vue fournit une méthode DefineCustomElement qui est presque identique à la définition de composants Vue généraux pour prendre en charge la création d'éléments personnalisés. DefineComponent est exactement le même que les paramètres reçus par cette méthode. Mais il renvoie un constructeur pour une classe d'éléments personnalisés native qui hérite de HTMLElement (peut être enregistrée via customElements.define()). in 操作符自动检查该属性是否已经存在于 DOM 对象上，并且在这个 key 存在时，更倾向于将值设置为一个 DOM 对象的属性。这意味着，在大多数情况下，如果自定义元素遵循推荐的最佳实践，你就不需要考虑这个问题。
然而，也会有一些特别的情况：必须将数据以一个 DOM 对象属性的方式传递，但该自定义元素无法正确地定义/反射这个属性 (因为 in 检查失败)。在这种情况下，你可以强制使用一个 v-bind 绑定、通过 .prop
function defineCustomElement(
component:
| (ComponentOptions & { styles?: string[] })
| ComponentOptions['setup']
): {
new (props?: object): HTMLElement
}<my-vue-element></my-vue-element>
import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({
// 这里是同平常一样的 Vue 组件选项
props: {},
emits: {},
template: `...`,
// defineCustomElement 特有的：注入进 ShadowRoot 的 CSS
styles: [`/* css */`]
})
// 注册自定义元素之后，所有此页面中的 `<my-vue-element>` 标签都会被升级
customElements.define('my-vue-element', MyVueElement)
// 也可以在注册之后实例化元素：
document.body.appendChild(
new MyVueElement({
// 初始化 props（可选）
})
)resolve: { alias: { 'vue': 'vue/dist/vue.esm-bundler.js' } },Si l'élément est toujours dans le document, cela signifie qu'il s'agit d'une opération de déplacement et l'instance du composant sera conservée
#🎜 🎜## 🎜🎜#attribute 总是根据需要反射为相应的属性类型。原话已经非常清晰明了，可以直接重述。重新表述如下： 基本数据类型的属性值（例如字符串、布尔值或数字）可以通过反射反映为属性。
当它们被设为 attribute 时 (永远是字符串)，Vue 也会自动将以 Boolean 或 Number 类型声明的 prop 转换为所期望的类型。比如下面这样的 props 声明：
props: {
selected: Boolean,
index: Number
}并以下面这样的方式使用自定义元素：
<my-element selected index="1"></my-element>
在组件中，selected 会被转换为 true (boolean 类型值) 而 index 会被转换为 1 (number 类型值)。
emit 触发的事件都会通过以 CustomEvents 的形式从自定义元素上派发。
额外的事件参数 (payload) 将会被暴露为 CustomEvent 对象上的一个 detail 数组。
在一个组件中，插槽将会照常使用 渲染。但是，使用最终元素时，只能使用原生插槽的语法，无法使用作用域插槽。
当传递具名插槽时，应使用 slot attribute 而不是 v-slot 指令：
<my-element> <div slot="named">hello</div> </my-element>
Provide / Inject API 和相应的组合式 API 在 Vue 定义的自定义元素中都可以正常工作。
但是，依赖关系只在自定义元素之间起作用。一个由常规 Vue 组件提供的属性无法被注入到由 Vue 定义的自定义元素中。
defineCustomElement 也可以搭配 Vue 单文件组件 (SFC) 使用。但是，根据默认的工具链配置，SFC 中的 <style> 在生产环境构建时仍然会被抽取和合并到一个单独的 CSS 文件中。当正在使用 SFC 编写自定义元素时，通常需要改为注入 <style> 标签到自定义元素的 ShadowRoot 上。
官方的 SFC 工具链支持以“自定义元素模式”导入 SFC (需要 @vitejs/plugin-vue@^1.4.0 或 vue-loader@^16.5.0)。一个以自定义元素模式加载的 SFC 将会内联其 <style> 标签为 CSS 字符串，并将其暴露为组件的 styles 选项。这会被 defineCustomElement 提取使用，并在初始化时注入到元素的 ShadowRoot 上。
要开启这个模式，将组件文件以 .ce.vue 结尾即可：
// Example.ce.vue
<template>
<h2>Example.ce</h2>
</template>
<script>
</script>
<style>
h2 {
color: red;
}
</style>import { defineCustomElement } from 'vue'
import Example from './Example.ce.vue'
console.log(Example.styles)
// 转换为自定义元素构造器
const ExampleElement = defineCustomElement(Example)
// 注册
customElements.define('my-example', ExampleElement)按元素分别导出构造函数，以便用户可以灵活地按需导入它们，还可以通过导出一个函数来方便用户自动注册所有元素。
// Vue 自定义元素库的入口文件
import { defineCustomElement } from 'vue'
import Foo from './MyFoo.ce.vue'
import Bar from './MyBar.ce.vue'
const MyFoo = defineCustomElement(Foo)
const MyBar = defineCustomElement(Bar)
// 分别导出元素
export { MyFoo, MyBar }
export function register() {
customElements.define('my-foo', MyFoo)
customElements.define('my-bar', MyBar)
}用来在定义 Vue 组件时为 TypeScript 提供类型推导的辅助函数。
对于一个 ts 文件，如果我们直接写 export default {}，无法有针对性的提示 vue 组件里应该有哪些属性。
但是，增加一层 defineComponet 的话，export default defineComponent({})，就可以对参数进行一些类型推导和属性的提示等操作。
function defineComponent( component: ComponentOptions | ComponentOptions['setup'] ): ComponentConstructor
参数是一个组件选项对象。返回值将是该选项对象本身，因为该函数实际上在运行时没有任何操作，仅用于提供类型推导，注意返回值的类型有一点特别：它是一个构造函数类型，它是根据选项推断出的组件实例类型。这样做可以在 TSX 中将返回值用作标签时提供类型推断支持。
你可以像这样从 defineComponent() 的返回类型中提取出一个组件的实例类型 (与其选项中的 this 的类型等价)：
const Foo = defineComponent(/* ... */) type FooInstance = InstanceType<typeof Foo>
用来定义一个异步组件。在大型项目中，我们可能会将应用拆分成更小的模块，并在需要时从服务器加载相关组件。defineAsyncComponent 在运行时是懒加载的，参数可以是一个返回 Promise 的异步加载函数（resolve 回调方法应该在从服务器获得组件定义时调用），或是对加载行为进行更具体定制的一个选项对象。
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
// ...从服务器获取组件
resolve(/* 获取到的组件 */)
})
})
// ... 像使用其他一般组件一样使用 `AsyncComp`
// 也可以使用 ES 模块动态导入
const AsyncComp = defineAsyncComponent(() =>
import('./components/MyComponent.vue')
)得到的 AsyncComp 是一个外层包装过的组件，仅在页面需要它渲染时才会调用加载内部实际组件的函数。它会将接收到的 props 和插槽传给内部组件，所以你可以使用这个异步的包装组件无缝地替换原始组件，同时实现延迟加载。
与普通组件一样，异步组件可以使用 app.component() 全局注册：
app.component('MyComponent', defineAsyncComponent(() => import('./components/MyComponent.vue') ))
也可以直接在父组件中直接定义它们：
<script setup>
import { defineAsyncComponent } from 'vue'
const AdminPage = defineAsyncComponent(() =>
import('./components/AdminPageComponent.vue')
)
</script>
<template>
<AdminPage />
</template>异步操作不可避免地会涉及到加载和错误状态，因此 defineAsyncComponent() 也支持在高级选项中处理这些状态：
const AsyncComp = defineAsyncComponent({
// 加载函数
loader: () => import('./Foo.vue'),
// 加载异步组件时使用的组件
loadingComponent: LoadingComponent,
// 展示加载组件前的延迟时间，默认为 200ms
delay: 200,
// 加载失败后展示的组件
errorComponent: ErrorComponent,
// 如果提供了一个时间限制，并超时了，也会显示这里配置的报错组件，默认值是：Infinity
timeout: 3000
})Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
La différence entre vue2.0 et 3.0
Quels sont les cycles de vie de vue3
La différence entre bond0 et bond1
Comment définir la transparence en CSS
iexplore.exe
Historique des opérations de la table de vue Oracle
Tri des tableaux JS : méthode sort()
Méthodes de lecture et d'écriture de fichiers Java DBF
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
