vue有几个组件(vue有哪些组件)？

本教程运行环境:windows7系统，vue3版本3，DELL G3电脑。

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

组件必须首先注册，这样Vue应用程序才能识别它们。有两种类型的组件注册:

使用方法app . component(& # 39；组件名称& # 39；，{})来注册一个全局组件，这个全局注册的组件可以用在应用程序中任何组件的模板中。(学习视频分享:vuejs入门教程，基础编程视频)

第一个参数是组件名。建议遵循W3C规范中的自定义组件名称(以避免与当前和未来的HTML元素冲突):字母全部小写，并且必须包含连字符。第二个参数是组件的配置选项。

const app = vue . create app()；app . component(& # 39；我的-组件& # 39；，{ template:` & lt；h1 & gt你好世界！& lt/h1 & gt；`});const VM = app . mount(& # 39；# app & # 39虽然全局组件可以方便地用于各种组件(包括其内部部件)，但可能会导致构建项目的量增加，用户不必要地下载JavaScript。

？在app . mount(& # 39；# app & # 39)在应用程序挂载到DOM之前注册全局组件。

在(父)组件的组件选项中部分注册的组件。

这些子组件由一个普通的JavaScript对象定义，该对象接收与全局组件相同的参数，但它们只能在父组件中使用，称为本地组件。

对于components对象中的每个属性，其属性名是自定义元素的名称，其属性值是该组件的option对象。

Constcomponent A = {/*...*/} Constcomponent B = {/*...*/}常量组件C = {/*...*/}/然后定义要在父组件component-a & # 39；的“components”选项中使用的组件constapp = vue . create app({ components:{ & # 30；:ComponentA，& # 39；组件-b & # 39；:ComponentB }})动态组件动态组件是指根据属性is的不同绑定值呈现的名称不同的组件。

内置标签

该属性可以是:

注册组件的名称。组件的选项对象？有时，为了保存动态组件的状态，如组件中输入框的值，标签

？属性is也可以用来解决HTML元素嵌套的规则限制。它应用于原生HTML标签，其值是组件名，这样原生标签实际呈现的内容就是组件。

因为对于

& lt表& gt& lttr是= & quotvue:blog-post-row & quot；& gt& lt/tr & gt；& lt/table & gt；但是，只有在HTML中直接使用Vue模板时，才会满足上述限制，而如果您刚刚使用模板，则没有这样的限制:

一个字符串，比如template:& # 39；...'单一文件组件。某视频剪辑软件

异步组件在加载页面时不会立即呈现，而是等待一些业务逻辑完成，然后执行组件中的逻辑并将其呈现到页面。

//全局组件app . component(& # 39；异步示例& # 39；，vue . defineeasynccomponent(()= & gt；{返回新承诺((解决，拒绝)= & gt{ resolve({ template:& # 39；& ltdiv & gt我是异步的！& lt/div & gt；'} } } }))//本地组件导入{createapp，defineasyncomponent}从& # 39；vue & # 39createApp({ //...组件:{ async component:defineasync component(()= & gt；{返回新承诺((解决，拒绝)= & gt{ resolve({ template:& # 39；& ltdiv & gt我是异步的！& lt/div & gt；'} } } } } } } }异步组件的注册类似于一般同步组件的注册。如果是全局组件，也是用app.component()注册的，但是第二个参数使用Vue.defineAsyncComponent()方法告诉Vue该组件是异步组件。

defineAsyncComponent()方法的参数是匿名函数，函数返回一个承诺。在Promise中，一个对象应该是resolve({ })，它包含与构建组件相关的配置参数。仅当Promise resolve或reject执行异步组件的处理时。

(学习视频分享:vuejs入门教程，基础编程视频)以上是vue几大组件的详细介绍。更多请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 如何在vue中使用typescript（vuecli typescript）
• typescript如何实时更新数据（typescript 4.1）
• 如何使用typescript开发Vue（如何使用typescript开发3D地图引擎）
• 如何在 vue 中使用 typescript
• 为什么typescript要重写vue3（typescript+vue）

本文由主机参考刊发，转载请注明：vue有几个组件(vue有哪些组件)？ https://zhujicankao.com/85680.html