vue에는 몇 개의 주요 구성 요소가 있습니까?

로컬 구성 요소 🎜🎜(상위) 구성 요소 내 구성 요소의 comminents 옵션에 등록된 구성 요소입니다. 🎜🎜이러한 하위 구성요소는 공통 JavaScript 개체에 의해 정의되어 전역 구성요소와 동일한 매개변수를 받지만 로컬이라는 상위 구성요소에서만 사용할 수 있습니다. 구성 요소. 🎜🎜구성 요소 개체의 각 속성에 대해 속성 이름은 맞춤 요소의 이름이고 속성 값은 이 구성 요소의 옵션 개체입니다. 🎜

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

동적 구성 요소🎜🎜동적 구성 요소는 속성에 대한 다양한 바인딩 값에 따라 서로 다른 이름을 렌더링하는 구성 요소를 말합니다. 🎜🎜내장 태그 <comComponent :is="comComponentName />"는 속성 is에 대한 컨트롤 바인딩을 통해 다양한 구성요소를 동적으로 표시하는 데 사용됩니다. 에는 동일한 이름을 가진 해당 구성요소가 표시됩니다. 🎜🎜속성 is는 다음과 같습니다: 🎜🎜🎜등록된 구성 요소의 이름🎜🎜옵션 개체🎜🎜🎜때때로 전환하기 위해, 저장하기 위해 구성 요소의 입력 상자 값과 같은 동적 구성 요소의 상태를 보려면 <keep-alive></keep-alive> 태그를 사용하여 동적 구성 요소를 래핑할 수 있습니다. 구성요소. 🎜🎜is 속성은 HTML 요소 중첩의 규칙 제한을 해결하는 데에도 사용할 수 있으며 해당 값은 구성 요소 이름이므로 실제 콘텐츠는 기본 태그는 구성 요소입니다. 🎜🎜 <ul>, <ol>, <table> 및 <select> 이러한 요소의 경우 직접 하위 요소를 내부에 배치하는 데 엄격한 제한이 있습니다. 다른 요소가 포함되면 유효하지 않은 콘텐츠로 간주되며 외부로 승격되면 최종 렌더링 문제가 발생합니다. 그러나 이러한 요소에서 구성 요소를 직접 하위 요소로 사용해야 하는 경우 "법적" 하위 요소에 is 속성을 ​​사용하여 렌더링할 실제 콘텐츠를 지정할 수 있습니다. is는 <tr>와 같은 기본 HTML 요소에 사용됩니다. 해당 값에는 vue:라는 접두사가 붙어야 합니다. 구문 분석되는 것은 실제로 Vue 구성 요소입니다. 🎜🎜rrreee🎜그러나 위의 제한 사항은 HTML에서 직접 Vue 템플릿을 사용할 때만 발생합니다. 다음 단계에서 템플릿을 사용하면 그러한 제한 사항이 없습니다. 🎜<ul>

字符串，例如 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入门教程、编程基础视频）

위 내용은 vue에는 몇 개의 주요 구성 요소가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!