vue的四大组件是什么

vue有4大组件：1、全局组件，用“appponent(...)”方法来注册全局组件，全局组件可在应用的任何组件模板中使用。2、局部组件，是在一个（父）组件中的ponents”选项中注册的组件。3、动态组件，指根据给属性is绑定值的不同来渲染不同名称的组件。4、异步组件，在加载页面时并不立即渲染，而是要等带一些业务逻辑完成后，才会执行组件内的逻辑和渲染到页面上。

Vue 的组件本质上是一个具有预定义选项的实例，我们使用小型的、独立和通常可复用的组件，通过层层拼装，最终形成了一个完整的页面。

组件必须先注册以便 Vue 应用能够识别，有两种组件的注册类型：

• 全局注册

• 局部注册

全局组件

（在根组件中）使用 方法appponent(&#39ponent-Name', {}) 来注册全局组件，全局注册的组件可以在应用中的任何组件的模板中使用。（学习视频分享：vuejs入门教程、编程基础视频）

其中第一个参数时组件名，推荐遵循 W3C 规范中的自定义组件名（避免与当前以及未来的 HTML 元素发生冲突）：字母全小写且必须包含一个连字符。第二个参数是组件的配置选项。

constapp=Vue.createApp();appponent('myponent',{template:`<h2>HelloWorld!</h2>`});constvm=app.mount('#app')

?? 全局组件虽然可以方便地在各种组件中使用（包括其各自的内部），但是这可能造成构建项目时体积增大，用户下载 JavaScript 的无谓增加。

? 需要在 app.mount('#app') 应用挂载到 DOM 之前进行全局组件的注册

局部组件

在一个（父）组件中组件的 <codeponents 选项中注册的组件。

这些子组件通过一个普通的 JavaScript 对象来定义，其接收的参数和全局组件一样，但是它们只能在该父组件中使用，称为局部组件。

对于 <codeponents 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

const&nbspponentA={/*...*/}const&nbspponentB={/*...*/}const&nbspponentC={/*...*/}

//然后在父组件的ponents`选项中定义你想要使用的组件constapp=Vue.createApp({&nbspponents:{&#39ponent-a':&nbspponentA,&#39ponent-b':&nbspponentB}})

动态组件

动态组件指根据给属性 is绑定值的不同来渲染不同名称的组件。

内置的标签 &ltponent :is=&quotponentName />" 用以动态显式不同的组件，通过控制绑定在属性 is 上的参数值，即可显示相应的同名组件。

属性 is 可以是：

• 已注册组件的名字

• 一个组件的选项对象

? 有时候为了在切换时，保存动态组件的状态，例如组件中的输入框的值，可以用标签 <keep-alive></keep-alive> 包裹动态组件。

? 属性 is 还可以用于解决 HTML 元素嵌套的规则限制，将它应用到原生的 HTML 标签上，它的值就是组件名，这样原生标签实际渲染出来的内容就是组件。

因为对于 <ul>、<ol>、<table> 和 <select> 这些元素，其内部允许放置的直接子元素是有严格限制的，如果嵌入其他元素会被视为无效的内容，而提升到外部造成最终渲染问题。但如果我们需要在这些元素中使用组件作为直接子元素，则可以在「合法」的子元素上使用属性 is，指定渲染的实际内容，这时属性 is 用在原生的 HTML 元素上，如 <tr> 其值 ? 需要使用 vue: 作为前缀，以表示解析的实际上是一个 Vue 组件

<table><tris="vue:blog-post-row"></tr></table>

但以上限制只是在 HTML 中直接使用 Vue 模板时才会遇到，如果是在一下前进使用模板就没有这种限制：

• 字符串，例如 template: '...'

• 单文件组件 .vue

• <script type="text/x-template">

异步组件

现在的大型网页往往需要异步获取不同的数据，Vue 有一个 defineAsynponent 方法定义异步组件，以优化应用的加载和用户体验。

异步组件在加载页面时并不立即渲染，而是要等带一些业务逻辑完成后，才会执行组件内的逻辑和渲染到页面上。

//全局组件appponent('async-example',Vue.defineAsynponent(()=>{returnnewPromise((resolve,reject)=>{resolve({template:'<div>Iamasync!</div>'})})}))//局部组件import{createApp,defineAsynponent}from'vue'createApp({//...&nbspponents:{Asynponent:defineAsynponent(()=>{returnnewPromise((resolve,reject)=>{resolve({template:'<div>Iamasync!</div>'})})})}})

异步组件的注册和一般的同步组件类似，如果是注册全局组件，也是使用 appponent()进行注册，不过第二个参数使用 Vue.defineAsynponent() 方法告诉 Vue 应用该组件是异步组件。

defineAsynponent() 方法的参数是一个匿名函数，而且函数是返回一个 Promise。在 Promise 内应该 resovlve({}) 一个对象，其中包含了构建组件相关配置参数。只有当 Promise resolve 或 reject 才执行异步组件的处理。

以上就是关于“vue的四大组件是什么”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注主机评测网行业资讯频道。

上一篇：css如何引用外部样式表

下一篇：vue移动端框架有哪些