Vue has 4 major components: 1. Global components. Use the "app.component(...)" method to register global components. Global components can be used in any component template of the application. 2. Local components are components registered in the "components" option of a (parent) component. 3. Dynamic components refer to components with different names that are rendered according to the different binding values to the attribute is. 4. Asynchronous components do not render immediately when the page is loaded. Instead, they wait until some business logic is completed before executing the logic in the component and rendering it to the page.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Vue’s component is essentially an instance with predefined options. We use small, independent and usually reusable components, which are assembled layer by layer to finally form a complete page.

Components must be registered first so that the Vue application can recognize them. There are two types of component registrations:

• Global registration
• Local registration

Global component

(in the root component) use themethodapp.component('component-Name', {})to register the global component, global registration The component can be usedin the template of anycomponent in the application. (Learning video sharing:vuejs introductory tutorial,Basic programming video)

The first parameter is the component name, and it is recommended to follow theW3C specificationCustom component names in (to avoid conflicts with current and future HTML elements): the lettersare all lowercaseandmust contain a hyphen. The second parameter is the component's configuration options.

const app = Vue.createApp(); app.component('my-component', { template: `
Hello World!
` }); const vm = app.mount('#app')

⚠️ Although global components can be conveniently used in various components (including their own internals), this may cause an increase in the size of the project when building it and a unnecessary increase in the amount of JavaScript downloaded by users.

Need to register global components beforeapp.mount('#app')Applicationis mounted to the DOM

Local components

A component registered in the

componentsoption of a component within a (parent) component.

These sub-components

are defined by a common JavaScript object, and the parameters they receive are the same as global components, but theycan only be usedin the parent component, called local components.

For each property in the

componentsobject, itsproperty name is the name of the custom element, and its property value is the option object of this component.

const ComponentA = { /* ... */ } const ComponentB = { /* ... */ } const ComponentC = { /* ... */ }

// 然后在父组件的 `components` 选项中定义你想要使用的组件 const app = Vue.createApp({ components: { 'component-a': ComponentA, 'component-b': ComponentB } })

Dynamic component

Dynamic component refers to rendering components with different names based on the different binding values to the attribute is.

Built-in tags

e9780e2c3bd5df1b2b95e629ba2e22d0"is used to dynamically display different components through control binding to thepropertyis# The parameter value on## will display the corresponding component with the same name.Attribute

is

Can be:

The name of a registered component

• The
options object of a component
Sometimes in order to save the state of a dynamic component when switching, such as the value of an input box in a component, you can use the

tag

7c9485ff8c3cba5ae9343ed63c2dc3f7c4b0fedea1bf7574609a2a8ccf399831

,c34106e0b4e09414b63b2ea253ff83d6,f5d188ed2c074f8b944552db028f98a1and221f08282418e2996498697df914ce4eThere are strict restrictions on the direct child elements allowed to be placed inside these elements. If embedded in other elements, it will be regarded as invalid content and promoted to the outside, causing final rendering problems. But if we need to use components as direct child elements in these elements, we can use the attributeison the "legal" child elements to specify the actual content to be rendered. In this case, the attributeisUsed on native HTML elements, such asa34de1251f0d9fe1e645927f19a896e8Its valueneeds to be prefixed withvue:to indicate that what is parsed is actually a Vue component

But the above restrictions will only be encountered when using Vue templates directly in HTML. If you use the template in the next step, there will be no such restrictions:

• 字符串，例如template: '...'
• 单文件组件.vue
• 91bc4aaf1732b26c8e5fcf53781ed1a6

异步组件

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

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

// 全局组件 app.component('async-example', Vue.defineAsyncComponent(() => { return new Promise((resolve, reject) => { resolve({ template: '
I am async!
' }) }) })) // 局部组件 import { createApp, defineAsyncComponent } from 'vue' createApp({ // ... components: { AsyncComponent: defineAsyncComponent(() => { return new Promise((resolve, reject) => { resolve({ template: '
I am async!
' }) }) }) } })

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

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

（学习视频分享：vuejs入门教程、编程基础视频）

The above is the detailed content of How many major components does vue have?. For more information, please follow other related articles on the PHP Chinese website!