How many major components does vue have?

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 the methodapp.component('component-Name', {}) to register the global component, global registration The component can be used in the template of any component 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 the W3C specification Custom component names in (to avoid conflicts with current and future HTML elements): the letters are all lowercase and must contain a hyphen . The second parameter is the component's configuration options.

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

⚠️ 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 before app.mount('#app') Application is mounted to the DOM

Local components

A component registered in the

components option 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 they can only be used in the parent component, called local components.

For each property in the

components object, its property 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

is used to dynamically display different components through control binding to the propertyis# 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

Wrap dynamic components. Attribute

is

can also be used to solve the rule restrictions of HTML element nesting. It is applied to the native HTML tag. Its value is the component name, so that the native tag is actually rendered. The content is the component. Because for

, <ol>, <table> and <select> There 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 attribute is on the "legal" child elements to specify the actual content to be rendered. In this case, the attribute is Used on native HTML elements, such as <tr> Its value needs to be prefixed with vue: to indicate that what is parsed is actually a Vue component

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

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
• <script type="text/x-template">

异步组件

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

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

// 全局组件
app.component('async-example', Vue.defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    resolve({
      template: &#39;<div>I am async!</div>&#39;
    })
  })
}))

// 局部组件
import { createApp, defineAsyncComponent } from &#39;vue&#39;

createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() => {
      return new Promise((resolve, reject) => {
        resolve({
          template: &#39;<div>I am async!</div>&#39;
        })
      })
    })
  }
})

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

defineAsyncComponent() 方法的参数是一个匿名函数，而且函数是返回一个 Promise。在 Promise 内应该 resovlve({}) 一个对象，其中包含了构建组件相关配置参数。只有当 Promise resolve 或 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!