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

Vue에는 4가지 주요 구성 요소가 있습니다. 1. 전역 구성 요소. 전역 구성 요소를 등록하려면 "app.comComponent(...)" 메서드를 사용하세요. 전역 구성 요소는 애플리케이션의 모든 구성 요소 템플릿에서 사용할 수 있습니다. 2. 로컬컴포넌트는 (부모)컴포넌트의 "comments" 옵션에 등록된 컴포넌트이다. 3. 동적 구성 요소는 속성에 대한 다양한 바인딩 값에 따라 렌더링되는 다양한 이름을 가진 구성 요소를 말합니다. 4. 비동기 구성 요소는 페이지가 로드될 때 즉시 렌더링되지 않습니다. 대신 구성 요소에서 논리를 실행하고 페이지에 렌더링하기 전에 일부 비즈니스 논리가 완료될 때까지 기다립니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

Vue의 구성 요소는 기본적으로 사전 정의된 옵션이 있는 인스턴스입니다. 작고 독립적이며 일반적으로 재사용이 가능한 구성 요소를 사용하여 레이어별로 조립하여 최종적으로 완전한 페이지를 형성합니다.

Vue 애플리케이션이 인식할 수 있도록 먼저 구성 요소를 등록해야 합니다. 구성 요소 등록에는 두 가지 유형이 있습니다.

<ul>

전역 등록

로컬 등록

전역 구성 요소

(루트 구성 요소에서) 메서드를 사용합니다. 전역 구성요소를 등록하는 app.comComponent('comComponent-Name', {}). 전역적으로 등록된 구성요소는 애플리케이션에 있는 모든 구성요소의 템플릿에서 사용할 수 있습니다. (학습 동영상 공유: vuejs 입문 튜토리얼, 기본 프로그래밍 동영상) app.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绑定值的不同来渲染不同名称的组件。

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

属性 is 可以是：

<ul>

已注册组件的名字

一个组件的选项对象

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

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

因为对于 <ul>、<ol>、<table> 和 <select> 这些元素，其内部允许放置的直接子元素是有严格限制的，如果嵌入其他元素会被视为无效的内容，而提升到外部造成最终渲染问题。但如果我们需要在这些元素中使用组件作为直接子元素，则可以在「合法」的子元素上使用属性 is，指定渲染的实际内容，这时属性 is 用在原生的 HTML 元素上，如 <tr> 其值 需要使用 vue:첫 번째 매개변수는 구성요소 이름이므로 다음을 권장합니다. < a href="https://www.php.cn/link/c271ffa4de38005e790b6cd7102173f0" target="_blank" rel="nofollow noopener noreferrer" title="https://html.spec.whatwg.org/multipage/custom 팔로우 -elements .html#valid-custom-element-name" ref="nofollow noopener noreferrer">W3C 사양의 맞춤 구성 요소 이름(현재 및 향후 HTML 요소와의 충돌을 피하기 위해): 문자모두 소문자 < /strong>하이픈을 포함해야 합니다. 두 번째 매개변수는 구성요소의 구성 옵션입니다.

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

⚠️ 전역 구성 요소는 다양한 구성 요소(자체 내부 포함)에서 편리하게 사용할 수 있지만 이로 인해 프로젝트 빌드 시 프로젝트 크기가 커지고 사용자가 다운로드하는 JavaScript 양이 불필요하게 증가할 수 있습니다.

🎜app.mount('#app') 애플리케이션이 DOM에 마운트되기 전에 전역 구성 요소를 등록해야 합니다.🎜

로컬 구성 요소 🎜🎜(상위) 구성 요소 내 구성 요소의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!