Vue 구성 요소의 세 가지 API인 prop, Slot 및 Event에 대한 심층적인 이해

아무리 복잡한 구성요소라도 소품, 이벤트, 슬롯으로 구성되어야 합니다. 다음 기사에서는 vue 구성 요소의 prop, Slot 및 이벤트를 이해하고 이 세 가지 API를 작성하는 방법을 알아보는 데 도움이 되기를 바랍니다.

질문 소개

다음 시나리오에 직면한 적이 있습니까? 개발 중에 특히 일반적인 디스플레이나 기능을 접하고 이를 추출하여 독립 구성 요소로 캡슐화한 다음 다른 개발자와 공유하려고 합니다.

컴포넌트를 캡슐화하려면 먼저 컴포넌트의 기본 구성을 이해해야 합니다. 아무리 복잡한 컴포넌트라도 소품, 이벤트, 슬롯으로 구성되어야 합니다. 컴포넌트를 작성하는 과정은 이 세 가지 API를 설계하는 과정입니다. 마찬가지로, 다른 사람이 작성한 구성 요소를 읽고 싶은 경우에도 이 세 가지 API를 통해 빠르게 이해할 수 있습니다. [관련 추천: "vue.js Tutorial"]

그렇다면 prop, event, Slot 세 가지 API를 어떻게 작성해야 할까요?

속성 prop

prop은 구성 요소가 허용할 수 있는 속성을 정의하는 데 사용됩니다.

vue 공식 웹사이트를 읽어보면 prop이 배열이나 객체로 작성될 수 있다는 것을 알고 있습니다. 편의상, 엄밀하지 않은 prop의 배열 작성 방법을 직접 사용하는 분들이 많습니다. 일반 컴포넌트 작성 시에는 prop의 객체 작성 방법을 최대한 활용해야 합니다.

다음 코드를 볼 수 있습니다:

app.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
})

prop가 객체를 사용하여 작성되었다는 것을 누구나 볼 수 있다고 믿습니다. 들어오는 속성이 올바른지 확인하고 시간에 맞춰 프롬프트를 제공할 수 있습니다. 이는 독립 구성 요소를 작성할 때 특히 유용합니다.

vue는 단방향 데이터 흐름 원칙을 따라야 하므로 prop 값을 수정하려고 해서는 안 되며 다른 솔루션을 사용해야 합니다.

prop 값 수정을 위한 일반적인 솔루션

1. Prop은 초기 값을 전달하고 이를 데이터에 할당합니다

props: ['initialCounter'],
data() {
  return {
    counter: this.initialCounter
  }
}

2. 속성을 계산하여 prop 값을 받습니다.

props: ['size'],
computed: {
  normalizedSize() {
    return this.size.trim().toLowerCase()
  }
}

Slots

슬롯은 콘텐츠를 배포하는 데 사용됩니다.

<todo-button>
  Add todo
</todo-button>

<!-- todo-button 组件模板 -->
<button class="btn-primary">
  <slot></slot>
</button>

등의 컴포넌트는

<!-- 渲染 HTML -->
<button class="btn-primary">
  Add todo
</button>

등의 Add todo로 대체됩니다. 이것은 슬롯의 가장 기본적인 사용법입니다. 이름에서 알 수 있듯이 슬롯을 구별하기 위한 것입니다. 여러 개의 슬롯을 설정할 수 있습니다. 예를 들어

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

에서 슬롯에 대한 백업 설정 정보가 가끔 나타나는 경우 다음과 같이 사용할 수 있습니다.

<button type="submit">
  <slot>Submit</slot>
</button>

슬롯의 백업 정보는 Submit

event

이벤트 이름

입니다.

하위 컴포넌트의 데이터가 수정되었을 때, 상위 컴포넌트에 알리고 싶을 때는 다음과 같이 이벤트 이벤트를 이용하면 됩니다.

// 子组件
this.$emit('myEvent')

// 父组件
<my-component @my-event="doSomething"></my-component>

하위 컴포넌트가 호출되면 이벤트 이름이 camel인 것을 알 수 있습니다. 케이스, 상위 구성 요소의 이벤트 이름은 케밥 케이스 이름입니다.

사용자 정의 이벤트

app.component('custom-form', {
  emits: ['inFocus', 'submit']
})

와 같은 내보내기 옵션을 통해 이벤트를 사용자 정의할 수 있습니다. 사용자 정의 이벤트가 클릭과 같은 기본 이벤트와 동일한 경우 사용자 정의 이벤트가 네이티브 이벤트

컴포넌트 구성

공식 홈페이지 사진 소개

페이지는 컴포넌트로 구성된 트리와 같습니다. 각 컴포넌트는 상위 컴포넌트와 하위 컴포넌트를 가질 수 있습니다. 속성 prop은 상위 컴포넌트를 허용합니다. 하위 구성 요소에 속성을 전달하기 위해 하위 구성 요소는 이벤트를 통해 상위 구성 요소에 정보를 전달할 수 있으며 슬롯은 상위 구성 요소에서 콘텐츠를 배포하는 데 사용됩니다.

Summary

컴포넌트에는 이 세 가지 API 외에도 수명주기, 믹스인, 계산된 속성 등 다른 콘텐츠도 있지만 컴포넌트 개발에는 이 세 가지 API이면 충분합니다. 이 세 가지 API를 마스터한 후에 남은 것은 구성 요소의 상호 작용 논리를 분리하고 다양한 기능을 다양한 하위 구성 요소에 배포한 다음 구성 요소 트리를 구축하는 것입니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 Vue 구성 요소의 세 가지 API인 prop, Slot 및 Event에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!