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

。 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 サイトの他の関連記事を参照してください。