구성 요소 기본 사항

🎜 구성 요소 조직< /h2>

---

🎜일반적으로 애플리케이션은 중첩된 구성 요소 트리 형태로 구성됩니다.
🎜🎜🎜🎜예를 들어 헤더와 사이드바, 콘텐츠 영역 및 기타 구성요소가 있을 수 있으며, 각 구성요소에는 다음과 같은 다른 구성요소가 포함됩니다. 탐색 링크, 블로그 게시물 등. 🎜🎜템플릿에서 사용하려면 Vue가 인식할 수 있도록 이러한 구성 요소를 먼저 등록해야 합니다. 구성 요소 등록에는 🎜글로벌 등록과 🎜로컬 등록의 두 가지 유형이 있습니다. 지금까지 우리 컴포넌트는 Vue.comComponent를 통해서만 전역적으로 등록되었습니다. 🎜

<div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>

🎜전역적으로 등록된 컴포넌트는 (new Vue를 통해) 등록된 후에는 무엇이든 사용할 수 있습니다. 새로 생성된 Vue 루트 인스턴스에는 해당 구성 요소 트리에 있는 모든 하위 구성 요소의 템플릿도 포함됩니다. 🎜🎜지금까지는 구성요소 등록에 대해 알아야 할 모든 것입니다. 이 페이지를 읽고 내용을 익히셨다면 다시 돌아와서 구성요소 등록 읽기를 마칩니다. 🎜🎜
🎜

🎜Prop를 통해 하위 구성요소에 데이터 전달

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
  v-bind:content="post.content"
  v-bind:publishedAt="post.publishedAt"
  v-bind:comments="post.comments"
></blog-post>

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
></blog-post>

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
})

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})

위에 표시된 것처럼 v-bind를 사용하여 props를 동적으로 전달할 수 있다는 것을 알 수 있습니다. API는 매우 유용합니다. v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。

到目前为止，关于 prop 你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把 prop 读完。

单个根元素

当构建一个 <blog-post> 组件时，你的模板最终会包含的东西远不止一个标题：

<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
    ></blog-post>
  </div>
</div>

最最起码，你会包含这篇博文的正文：

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button>
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
})

然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：

<button>
  Enlarge text
</button>

看起来当组件变得越来越复杂的时候，我们的博文不只需要标题和内容，还需要发布日期、评论等等。为每个相关的信息定义一个 prop 会变得很麻烦：

<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

所以是时候重构一下这个 <blog-post> 组件了，让它变成接受一个单独的 post prop：

<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>

上述的这个和一些接下来的示例使用了 JavaScript 的模板字符串来让多行的模板更易读。它们在 IE 下并没有被支持，所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE，请使用折行转义字符取而代之。

现在，不论何时为 post 对象添加一个新的属性，它都会自动地在 <blog-post> 内可用。

监听子组件事件

在我们开发 <blog-post> 组件时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号，同时让页面的其它部分保持默认的字号。

在其父组件中，我们可以通过添加一个 postFontSize

단일 루트 요소

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>

<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

<input v-model="searchText">

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

🎜이 예제와 다음 예제 중 일부는 JavaScript 를 사용합니다. 여러 줄로 구성된 템플릿을 더 읽기 쉽게 만드는 템플릿 문자열 IE에서는 지원되지 않으므로 컴파일하지 않고(Babel 또는 TypeScript와 같은 도구를 통해) IE를 지원해야 하는 경우 브레이크라인 이스케이프 문자를 사용하세요. 🎜

하위 구성요소 이벤트 수신

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

<custom-input v-model="searchText"></custom-input>

<alert-box>
  Something bad happened.
</alert-box>

문제는 이 버튼이 아무 것도 하지 않는다는 것입니다:

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

이 버튼을 클릭하면 모든 블로그 게시물의 텍스트를 확대하도록 상위 구성 요소에 지시해야 합니다. 다행히 Vue 인스턴스는 이 문제를 해결하기 위해 사용자 정의 이벤트 시스템을 제공합니다. 상위 구성 요소는 기본 DOM 이벤트를 처리하는 것처럼 v-on을 통해 하위 구성 요소 인스턴스의 모든 이벤트를 수신할 수 있습니다. v-on 监听子组件实例的任意事件：

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

同时子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件：

<table>
  <blog-post-row></blog-post-row>
</table>

有了这个 v-on:enlarge-text="postFontSize += 0.1" 监听器，父级组件就会接收该事件并更新 postFontSize 的值。

使用事件抛出一个值

有的时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让 <blog-post> 组件决定它的文本要放大多少。这时可以使用 $emit 的第二个参数来提供这个值：

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

然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：

或者，如果这个事件处理函数是一个方法：

那么这个值将会作为第一个参数传入这个方法：

在组件上使用 v-model

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

等价于：

当用在组件上时，v-model 则会这样：

为了让它正常工作，这个组件内的 <input> 必须：

• 将其 value 特性绑定到一个名叫 value 的 prop 上

• 在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

写成代码之后是这样的：

现在 v-modelrrreee

를 실행하고 이벤트 이름을 전달하여 이벤트를 트리거합니다. rrreee이v-on:enlarge-text="postFontSize += 0.1" 리스너를 사용하면 상위 구성 요소가 이벤트를 수신하고 postFontSize 값을 업데이트합니다.

이벤트를 사용하여 값을 던지세요

rrreee

• 字符串 (例如：template: '...'rrreee

  보시다시피 필요한 곳에 슬롯만 추가하면 됩니다.—— 너무나 간단합니다! 🎜🎜지금까지는 슬롯에 대해 알아야 할 모든 것입니다. 이 페이지를 읽고 내용을 마스터했다면 다시 돌아와서 슬롯 읽기를 마칩니다. 🎜🎜
  🎜

  동적 구성요소

  ---

  🎜때때로 멀티탭 인터페이스와 같이 다양한 구성 요소 간에 동적으로 전환하는 것이 매우 유용합니다.
  🎜🎜🎜🎜위 콘텐츠는 Vue의 <comComponent> 요소를 통해 추가할 수 있습니다. 특수 < code>is 속성이 구현되었습니다: 🎜rrreee🎜위의 예에서 currentTabComponent는 🎜
  < li>🎜을 포함할 수 있습니다. 등록된 구성 요소의 이름 또는 🎜
  • 🎜구성 요소의 옵션 개체🎜
  🎜 여기 전체 코드를 확인하고 사용해 보거나 이 버전등록된 구성 요소 이름 대신 구성 요소 옵션 개체를 바인딩하는 예를 이해합니다. 🎜🎜지금까지는 동적 구성 요소에 대해 알아야 할 모든 것입니다. 이 페이지를 읽고 내용을 마스터했다면 다시 돌아와 동적 및 비동기 구성요소 읽기를 마칩니다. 🎜🎜
  🎜

  DOM 템플릿 구문 분석 시 참고 사항

  ---

  🎜

  ,
  , 및 에는 내부에 어떤 요소가 나타날 수 있는지에 대한 엄격한 제한이 있습니다.
  1. ,
  및 과 같은 일부 요소는 내부의 특정 요소에만 나타날 수 있습니다. 요소. 🎜🎜이로 인해 제한된 요소를 사용할 때 몇 가지 문제가 발생하게 됩니다. 예: 🎜rrreee🎜이 사용자 정의 구성 요소 <blog-post-row>는 잘못된 콘텐츠로 외부로 승격되어 최종 렌더링 결과에 오류가 발생합니다. 다행히도 이 특별한 is 기능은 해결 방법을 제공합니다: 🎜rrreee🎜다음 소스 /em>의 템플릿을 사용하는 경우 이 제한 사항은 존재하지 않습니다<<라는 점에 유의해야 합니다< /strong>: 🎜
  • 🎜문자열(예: 템플릿: '...')🎜

  • 단일 파일 구성 요소(.vue).vue)

  • <script type="text/x-template">

  < code><script type="text/x-template">

  이 시점에서 DOM 템플릿을 파싱할 때 주의 사항을 알아야 합니다. 실제로 Vue에 필요한 모든 내용은 대략 이 정도입니다. 그것. 축하해요! 다음에 배울 내용은 아직 많지만 먼저 잠시 휴식을 취하고 Vue를 사용해 보고 임의의 재미있는 것들을 직접 만들어 보는 것이 좋습니다.
  

  이 지식을 마스터했다고 생각되면 다시 돌아와서 사이드바의 심층 구성 요소 장을 포함하여 전체 구성 요소 가이드의 모든 페이지를 읽어 보는 것이 좋습니다.
  🎜🎜🎜 🎜
  ← 양식 입력 바인딩
  제출하다

  PHP 중국어 웹사이트

  집강의기사Q&A사전수동다운로드찾다 APP다운로드