이 기사에서는 Vue의 렌더리스 슬롯 모드가 해결하는 데 도움이 될 수 있는 문제에 대해 논의합니다.
Vue.js 2.3.0에 도입된 범위 슬롯은 구성 요소의 재사용성을 크게 향상시킵니다. 재사용 가능한 동작과 플러그형 표현을 제공하는 문제를 해결하기 위해 렌더리스 구성 요소 패턴이 등장했습니다.
여기에서는 반대 문제인 재사용 가능한 외관과 플러그 가능한 동작을 제공하는 방법을 해결하는 방법을 살펴보겠습니다.
이 패턴은 복잡한 동작을 구현하고 사용자 정의 가능한 프레젠테이션이 있는 구성 요소에 적합합니다.
다음 기능을 충족합니다.
예: 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('click',(node) => this.$emit('click', 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>이 방법에는 몇 가지 단점이 있습니다.
렌더리스 슬롯이 이러한 문제를 어떻게 해결하는지 살펴보겠습니다.
동작은 기본적으로 이벤트에 대한 반응을 보여주는 것으로 구성됩니다. 그럼 이벤트와 구성 요소 메서드에 대한 액세스를 받을 슬롯을 만들어 보겠습니다.
<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
동작의 구성 요소는 자체 설명적입니다.on속성은 모든 구성 요소 이벤트에 대한 액세스를 제공합니다. 기본적으로 이 슬롯에는 새 이벤트를 사용할 수 있습니다.
요약Renderless 슬롯은 구성 요소의 메서드와 이벤트를 노출하는 흥미로운 솔루션을 제공합니다. 더 읽기 쉽고 재사용 가능한 코드를 제공합니다.
위 내용은 Vue의 비렌더링 동작 슬롯에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
