vue には主要なコンポーネントがいくつありますか?

Vue には 4 つの主要コンポーネントがあります: 1. グローバル コンポーネント: 「app.component(...)」メソッドを使用してグローバル コンポーネントを登録します。グローバル コンポーネントは、アプリケーションの任意のコンポーネント テンプレートで使用できます。 2. ローカルコンポーネントとは、（親）コンポーネントの「コンポーネント」オプションに登録されているコンポーネントです。 3. 動的コンポーネントとは、属性へのさまざまなバインディング値に従ってレンダリングされる、さまざまな名前を持つコンポーネントを指します。 4. 非同期コンポーネントは、ページが読み込まれてもすぐにはレンダリングされず、一部のビジネス ロジックが完了するまで待ってから、コンポーネント内のロジックを実行してページにレンダリングします。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

Vue のコンポーネントは、本質的に、事前定義されたオプションを備えたインスタンスです。私たちは、小さく、独立した、通常は再利用可能なコンポーネントを使用し、これらのコンポーネントをレイヤーごとに組み立てて、最終的に完全なページを形成します。

コンポーネントは、Vue アプリケーションが認識できるように最初に登録する必要があります。コンポーネントの登録には 2 つのタイプがあります:

<ul>グローバル登録

ローカル登録

グローバル コンポーネント

(ルート コンポーネント内)

methodapp.component('component-Name', {}) を使用してグローバル コンポーネントを登録します、グローバル登録 このコンポーネントは、アプリケーション内の任意の コンポーネントのテンプレートで 使用できます。 (学習ビデオ共有: vuejs 入門チュートリアル、基本プログラミング ビデオ)

最初のパラメータはコンポーネント名であり、

W3C に従うことをお勧めします。仕様 のカスタム コンポーネント名 (現在および将来の HTML 要素との競合を避けるため): 文字 はすべて小文字の であり、 にはハイフン が含まれている必要があります。 2 番目のパラメーターは、コンポーネントの構成オプションです。

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

オブジェクトの各プロパティの

プロパティ名はカスタム要素 の名前であり、そのプロパティ値はこのコンポーネントのオプション オブジェクトです。

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

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

動的コンポーネント

動的コンポーネントとは、属性へのさまざまなバインディング値に基づいて、さまざまな名前を持つコンポーネントをレンダリングすることを指します。

組み込みタグ

は、

propertyis# へのコントロール バインディングを通じてさまざまなコンポーネントを動的に表示するために使用されます。 ## のパラメータ値は、同じ名前の対応するコンポーネントを表示します。 属性 is は次のとおりです:

登録されたコンポーネントの名前

コンポーネントの <ul>options オブジェクト

コンポーネント内の入力ボックスの値など、切り替え時の動的コンポーネントの状態を保存するために、 タグ

動的コンポーネントをラップします

。 Attributeis は、HTML 要素のネストのルール制限を解決するためにも使用できます。ネイティブ HTML タグに適用されます。その値はコンポーネント名であるため、ネイティブ タグは実際にレンダリングされるコンテンツはコンポーネントです。

<ul>、

、<table>、および <select>## の場合# これらの要素内に配置できる直接の子要素には厳しい制限があり、他の要素に埋め込まれた場合、無効なコンテンツとみなされ外部に昇格され、最終的なレンダリングの問題が発生します。ただし、これらの要素の直接の子要素としてコンポーネントを使用する必要がある場合は、「正当な」子要素で属性 is を使用して、レンダリングされる実際のコンテンツを指定できます。この場合、属性 is などのネイティブ HTML 要素で使用されます。その値 には、解析対象が実際にであることを示すために vue: というプレフィックスを付ける必要があります。 Vue コンポーネント

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

ただし、上記の制限は、Vue テンプレートを HTML で直接使用する場合にのみ発生します。次のステップでテンプレートを使用する場合、そのような制限はありません: <ul>
1. 字符串，例如 template: '...'
2. 单文件组件 .vue
3. <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入门教程、编程基础视频）

以上がvue には主要なコンポーネントがいくつありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。