Vue의 비렌더링 동작 슬롯에 대한 자세한 설명

이 기사에서는 Vue의 렌더리스 슬롯 모드가 해결하는 데 도움이 될 수 있는 문제에 대해 논의합니다.

Vue.js 2.3.0에 도입된 범위 슬롯은 구성 요소의 재사용성을 크게 향상시킵니다. 재사용 가능한 동작과 플러그형 표현을 제공하는 문제를 해결하기 위해 렌더리스 구성 요소 패턴이 등장했습니다.

여기에서는 반대 문제인 재사용 가능한 외관과 플러그 가능한 동작을 제공하는 방법을 해결하는 방법을 살펴보겠습니다.

Renderless Components

이 패턴은 복잡한 동작을 구현하고 사용자 정의 가능한 프레젠테이션이 있는 구성 요소에 적합합니다.

다음 기능을 충족합니다.

1. 이 구성 요소는 모든 동작을 구현합니다.
2. 범위가 지정된 슬롯은 렌더링을 담당합니다.
3. 백업 콘텐츠를 통해 구성 요소를 직접 사용할 수 있습니다.

예: Ajax 요청을 수행하고 슬롯 결과를 표시하는 구성 요소입니다. 구성 요소는 Ajax 요청을 처리하고 상태를 로드하는 반면 기본 슬롯은 프레젠테이션을 제공합니다.

이것은 구현의 단순화된 버전입니다:

<template>
  <div>
    <slot v-if="loading" name="loading">
        <div>Loading ...</div>
    </slot>
    <slot v-else v-bind={data}>
    </slot>
  </div>
</template>

<script>
export default {
  props: ["url"],
  data: () => ({
    loading: true,
    data: null
  }),
  async created() {
    this.data = await fetch(this.url);
    this.loading = false;
  }
};
</script>

사용법:

<lazy-loading url="https://server/api/data">
  <template #default="{ data }">
    <div>{{ data }}</div>
  </template>
</lazy-loading>

이 패턴에 대한 원본 기사를 보려면 여기에서 확인하세요.

역질문

문제가 역전된 경우: 구성 요소의 주요 기능이 표현이고 추가로 해당 동작을 사용자 정의할 수 있어야 한다고 상상해 보세요.

다음과 같이 SVG를 기반으로 트리 구성 요소를 생성한다고 가정해 보겠습니다.

SVG 디스플레이 및 동작(예: 클릭 시 노드 철회 및 텍스트 강조 표시)을 제공하려고 합니다.

문제는 이러한 동작을 하드코딩하지 않고 구성 요소 사용자가 자유롭게 재정의하도록 할 때 발생합니다.

이러한 동작을 노출하는 간단한 해결책은 구성 요소에 메서드와 이벤트를 추가하는 것입니다.

다음과 같이 구현할 수 있습니다.

<script>
export default {
  mounted() {
    // pseudo code
    nodes.on(&#39;click&#39;,(node) => this.$emit(&#39;click&#39;, node));
  },
  methods: {
    expandNode(node) {
      //...
    },
    retractNode(node) {
      //...
    },
    highlightText(node) {
      //...
    },
  }
};
</script>

구성 요소 사용자가 구성 요소에 동작을 추가하려면 상위 구성 요소에서 ref를 사용해야 합니다. 예:

<template>
  <tree ref="tree" @click="onClick"></tree>
</template>

<script>
export default {
  methods: {
    onClick(node) {
      this.$refs.tree.retractNode(node);
    }
  }
};
</script>

이 방법에는 몇 가지 단점이 있습니다.

1. 더 이상 제공되지 않음 기본 동작
2. 동작 코드가 자주 복사되어 붙여넣어짐
3. 동작을 재사용할 수 없음

렌더리스 슬롯이 이러한 문제를 어떻게 해결하는지 살펴보겠습니다.

Renderless Slots

동작은 기본적으로 이벤트에 대한 반응을 보여주는 것으로 구성됩니다. 그럼 이벤트와 구성 요소 메서드에 대한 액세스를 받을 슬롯을 만들어 보겠습니다.

<template>
  <div>
    <slot name="behavior" :on="on" :actions="actions">
    </slot>
  </div>
</template>

<script>
export default {
  methods: {
    expandNode(node) { },
    retractNode(node) { },
   //...
  },
  computed:{
    actions() {
      const {expandNode, retractNode} = this;
      return {expandNode, retractNode};
    },
    on() {
      return this.$on.bind(this);
    }
  }
};
</script>

on 속성은 상위 구성 요소의 $on 메서드이므로 모든 이벤트를 수신할 수 있습니다. . on 属性是父组件的 $on 方法，因此可以监听所有事件。

可以将行为实现为无渲染组件。接下来编写点击扩展组件：

export default {
  props: ['on','action']

  render: () => null,

  created() {
    this.on("click", (node) => {
      this.actions.expandNode(node);
    });
  }
};

用法：

<tree>
  <template #behavior="{ on, actions }">
    <expand-on-click v-bind="{ on, actions }"/>
  </template>
</tree>

该解决方案的主要优点是：

• 通过备用内容来提供默认行为的可能性：

例如，通过将图形组件声明为：

<template>
  <div>
    <slot name="behavior" :on="on" :actions="actions">
      <expand-on-click v-bind="{ on, actions }"/>
    </slot>
  </div>
</template>

• 能够创建可重用的组件，并可以实现使用这个组件的用户能够选择的标准行为

考虑一个悬停突出显示组件：

export default {
  props: ['on','action']

  render: () => null,

  created() {
    this.on("hover", (node) => {
      this.actions.highlight(node);
    });
  }
};

覆盖标准行为：

<tree>
  <template #behavior="{ on, actions }">
    <highlight-on-hover v-bind="{ on, actions }"/>
  </template>
</tree>

• 行为插槽是可组合的

添加两个预定义的行为：

<tree>
  <template #behavior="{ on, actions }">
    <expand-on-click v-bind="{ on, actions }"/>
    <highlight-on-hover v-bind="{ on, actions }"/>
  </template>
</tree>

• 解决方案的可读性

作为行为的组件是能够自描述的。

• 可扩展性

on

동작은 렌더링 없는 구성 요소로 구현될 수 있습니다. 다음으로 클릭 확장 구성 요소를 작성하세요.

rrreee

사용법:

rrreee

이 솔루션의 주요 장점은 다음과 같습니다.

대체 콘텐츠를 통해 기본 동작을 제공할 수 있는 가능성:

예를 들어 그래픽 다음으로 선언된 구성 요소:

rrreee

재사용 가능한 구성 요소를 만들고 이 구성 요소를 사용하는 사용자가 선택할 수 있는 표준 동작을 구현할 수 있습니다.

호버 강조 표시 구성 요소를 고려하세요.

rrreee

표준 동작 재정의:

rrreee

동작 슬롯은 구성 가능합니다.

사전 정의된 두 가지 동작을 추가합니다.

rrreee

솔루션의 가독성

동작의 구성 요소는 자체 설명적입니다.

Extensibility

on 속성은 모든 구성 요소 이벤트에 대한 액세스를 제공합니다. 기본적으로 이 슬롯에는 새 이벤트를 사용할 수 있습니다.

요약Renderless 슬롯은 구성 요소의 메서드와 이벤트를 노출하는 흥미로운 솔루션을 제공합니다. 더 읽기 쉽고 재사용 가능한 코드를 제공합니다.

이 모드를 구현하는 트리 구성 요소의 코드는 github에서 찾을 수 있습니다: 🎜Vue.D3.tree🎜🎜🎜🎜원문 영어 주소: https://alligator.io/vuejs/renderless-behavior-slots/🎜🎜 작성자: David Desmaisons🎜🎜🎜🎜관련 권장 사항: 🎜🎜🎜🎜2020 프론트 엔드 vue 인터뷰 질문 요약(답변 포함) 🎜🎜🎜🎜vue 튜토리얼 권장 사항: 2020년 최신 5 vue.js 비디오 튜토리얼 선택 🎜🎜🎜🎜자세히 보기 더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 입문🎜을 방문하세요! ! 🎜🎜

위 내용은 Vue의 비렌더링 동작 슬롯에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!