Vue.js의 기능적 구성 요소 이해

Vue의 기능적 구성 요소는 렌더링 컨텍스트를 취하고 렌더링된 HTML을 반환하는 구성 요소이며 인스턴스가 없습니다. 기능적 구성 요소를 만들려면 기능적: true 속성과 렌더링 기능을 사용하여 객체를 만들어야 합니다.

기능적 구성 요소를 사용하면 간결한 방식으로 컨텍스트를 전달하여 간단한 구성 요소를 만들 수 있으므로 매우 간단하고 인기가 높습니다. 이 기사에서 공유하는 내용은 Vue.js의 기능적 구성 요소이며, 이는 특정 참고 가치가 있어 모든 사람에게 도움이 되기를 바랍니다.

【추천 강좌: Vue.js Tutorial】

기능적 컴포넌트란 무엇입니까

기능적 컴포넌트는 컴포넌트와 관련된 기능으로 간주할 수 있습니다. 렌더링 컨텍스트를 가져와 HTML을 렌더링하는 구성 요소를 반환한다고 가정해 보겠습니다. 인스턴스가 없으므로 이것이 없습니다.

기능적 구성요소 생성

기능적 구성요소를 생성하려면 functional: true속성과 렌더링 함수를 사용하여 객체를 생성해야 합니다. FunctionalButton 구성 요소의 예는 다음 예에서 생성됩니다.

export default {
  functional: true,
  render(createElement, context) {
    return createElement('button', 'Click me');
  }};

Rendering context

context 렌더링 함수에 표시되는 매개 변수를 렌더링 컨텍스트라고 합니다. 다음 속성을 포함하는 객체입니다:

props: props를 제공하는 객체

children: VNode 하위 노드의 배열

slots: 슬롯 객체를 반환하는 함수

parent: 상위 구성 요소에 대한 참조

청취자: 구성 요소에 등록된 v-on 청취자의 객체를 포함합니다. 이것은 data.on을 가리키는 별칭일 뿐입니다.

injections: 주입 옵션을 사용하면 개체에 주입되어야 하는 속성이 포함됩니다.

data: 이전 속성을 모두 포함하는 개체

이벤트 트리거

기능 구성 요소에는 인스턴스가 없고 이벤트 리스너는 context.listeners 속성의 상위 항목에서 나오므로 다음 코드를 사용하여 구현할 수 있습니다. 클릭 이벤트

예: FunctionalButton.js를 가져와 해당 템플릿에서 사용할 수 있는 App.vue 구성 요소가 있다고 가정합니다

<template>
  <FunctionalButton>
    Click me
  </FunctionalButton></template>

export default {
  functional: true,
  render(createElement, { props, listeners, children }) {
    return createElement(
      'button',
      {
        attrs: props,
        on: {
          click: listeners.click
        }
      },
      children
    );
  }};

요약: 위는 이 기사의 전체 내용입니다. 도움이 되기를 바랍니다. 모든 사람.

위 내용은 Vue.js의 기능적 구성 요소 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!