Aus wie vielen Hauptkomponenten besteht Vue?

Vue verfügt über 4 Hauptkomponenten: 1. Globale Komponenten: Verwenden Sie die Methode „app.component(...)“, um globale Komponenten zu registrieren. 2. Lokale Komponenten sind Komponenten, die in der Option „components“ einer (übergeordneten) Komponente registriert sind. 3. Dynamische Komponenten beziehen sich auf Komponenten mit unterschiedlichen Namen, die basierend auf den unterschiedlichen Bindungswerten des Attributs gerendert werden. 4. Asynchrone Komponenten werden nicht sofort gerendert, wenn die Seite geladen wird. Stattdessen warten sie, bis eine Geschäftslogik abgeschlossen ist, bevor sie die Logik in der Komponente ausführen und auf der Seite rendern.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Vues Komponente ist im Wesentlichen eine Instanz mit vordefinierten Optionen. Wir verwenden kleine, unabhängige und normalerweise wiederverwendbare Komponenten, die Schicht für Schicht zusammengesetzt werden, um schließlich eine vollständige Seite zu bilden.

Komponenten müssen zuerst registriert werden, damit die Vue-Anwendung sie erkennen kann. Es gibt zwei Arten der Komponentenregistrierung:

• Globale Registrierung
• Lokale Registrierung

Globale Komponente

(in der Stammkomponente) mit der -Methode app.component('component-Name', {}) zum Registrieren globaler Komponentenapp.component('component-Name', {}) 来注册全局组件，全局注册的组件可以在应用中的任何组件的模板中使用。（学习视频分享：vuejs入门教程、编程基础视频）

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

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

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

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

局部组件

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

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

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

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

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

动态组件

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

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

属性 is 可以是：

• 已注册组件的名字
• 一个组件的选项对象

有时候为了在切换时，保存动态组件的状态，例如组件中的输入框的值，可以用标签 7c9485ff8c3cba5ae9343ed63c2dc3f776c72b6c0750de65f93a5445ee8cabd8 包裹动态组件。

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

因为对于 ff6d136ddc5fdfeffaf53ff6ee95f185、c34106e0b4e09414b63b2ea253ff83d6、f5d188ed2c074f8b944552db028f98a1 和 221f08282418e2996498697df914ce4e 这些元素，其内部允许放置的直接子元素是有严格限制的，如果嵌入其他元素会被视为无效的内容，而提升到外部造成最终渲染问题。但如果我们需要在这些元素中使用组件作为直接子元素，则可以在「合法」的子元素上使用属性 is，指定渲染的实际内容，这时属性 is 用在原生的 HTML 元素上，如 a34de1251f0d9fe1e645927f19a896e8 其值 需要使用 vue: Global registrierte Komponenten können in der Vorlage jeder Komponente verwendet werden. (Teilen von Lernvideos: vuejs-Einführungs-Tutorial, Video zu Programmiergrundlagen)

Der erste Parameter ist der Komponentenname, der empfohlen wird Folgen Sie Benutzerdefinierter Komponentenname aus der W3C-Spezifikation (um Konflikte mit aktuellen und zukünftigen HTML-Elementen zu vermeiden): Buchstabenalle Kleinbuchstaben und müssen einen Bindestrich enthalten. Der zweite Parameter sind die Konfigurationsoptionen der Komponente.

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

⚠️ Obwohl globale Komponenten bequem in verschiedenen Komponenten (einschließlich ihrer eigenen Interna) verwendet werden können, kann dies zu einer Vergrößerung des Projekts beim Erstellen und zu einer unnötigen Erhöhung der von Benutzern heruntergeladenen JavaScript-Menge führen. 🎜🎜Es müssen globale Komponenten registriert werden, bevor die app.mount('#app')-Anwendung im DOM bereitgestellt wird. 🎜

Lokale Komponenten 🎜🎜Komponenten, die in der Option components einer Komponente innerhalb einer (übergeordneten) Komponente registriert sind. 🎜🎜Diese Unterkomponenten werden durch ein gemeinsames JavaScript-Objekt definiert, das dieselben Parameter wie globale Komponenten erhält, aber nur in der übergeordneten Komponente, genannt Local, verwendet werden kann Komponenten. 🎜🎜Für jede Eigenschaft im components-Objekt ist ihr Eigenschaftsname der Name des benutzerdefinierten Elements und ihr Eigenschaftswert ist das Optionsobjekt dieser Komponente. 🎜

// 全局组件
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;
        })
      })
    })
  }
})

rrreee

Dynamische Komponenten🎜🎜Dynamische Komponenten beziehen sich auf Komponenten, die je nach den unterschiedlichen Bindungswerten an das Attribut unterschiedliche Namen wiedergeben. 🎜🎜Das integrierte Tag e9780e2c3bd5df1b2b95e629ba2e22d0" wird verwendet, um verschiedene Komponenten durch Steuerungsbindung an die Eigenschaft is dynamisch anzuzeigen zeigt die entsprechende Komponente mit demselben Namen an. 🎜🎜Attribut is kann sein: 🎜🎜🎜Der Name einer registrierten Komponente🎜🎜Optionsobjekt🎜🎜🎜Manchmal zum Wechseln, zum Speichern B. den Wert des Eingabefelds in der Komponente, können Sie die Dynamik mit dem Tag 7c9485ff8c3cba5ae9343ed63c2dc3f776c72b6c0750de65f93a5445ee8cabd8 umschließen Komponente. 🎜🎜Das Attribut is kann auch verwendet werden, um die Regeleinschränkungen der HTML-Elementverschachtelung zu lösen. Wenden Sie es auf das native HTML-Tag an, und sein Wert ist der Komponentenname, sodass der tatsächliche Inhalt vom gerendert wird Natives Tag ist Komponenten. 🎜🎜Denn für ff6d136ddc5fdfeffaf53ff6ee95f185, c34106e0b4e09414b63b2ea253ff83d6, f5d188ed2c074f8b944552db028f98a1 und 221f08282418e2996498697df914ce4e Für diese Elemente gelten strenge Einschränkungen hinsichtlich der direkten Unterelemente, die darin platziert werden dürfen. Wenn andere Elemente eingebettet werden, werden sie als ungültiger Inhalt betrachtet und nach außen verschoben, was zu endgültigen Rendering-Problemen führt. Wenn wir jedoch Komponenten als direkte untergeordnete Elemente in diesen Elementen verwenden müssen, können wir das Attribut is für die „legalen“ untergeordneten Elemente verwenden, um den tatsächlich darzustellenden Inhalt anzugeben. In diesem Fall das Attribut is wird für native HTML-Elemente wie <code>a34de1251f0d9fe1e645927f19a896e8 verwendet. Dem Wert muss vue: vorangestellt werden, um anzugeben, was ist Beim Parsen handelt es sich tatsächlich um eine Vue-Komponente 🎜🎜rrreee🎜Aber die oben genannten Einschränkungen treten nur auf, wenn Sie im nächsten Schritt Vorlagen verwenden: 🎜

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

异步组件

现在的大型网页往往需要异步获取不同的数据，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入门教程、编程基础视频）

Das obige ist der detaillierte Inhalt vonAus wie vielen Hauptkomponenten besteht Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!