Vue 3: 렌더리스 구성 요소에서 작동합니다.
20526 단어 braziliandevsprogrammingtutorialvue
렌더리스 구성 요소가 있습니까?
Um componente renderless nada mais é do que um componente que não possui HTML próprio, ele existe apenas para estruturar e/ou tratar informações que são passadas para ele.
Resumidamente, você separa a logica da UI do seu app, utilizando slots.
Isso permite que haja uma flexibilidade no jeito em que as coisas são renderizadas e a lógica passa a ser reutilizável.
E como eles funcionam?
코딩하자!
entender como esses componentes funcionam, Imagine que você deseja criar uma to-do list igual a essa da imagem:
Primeiro vamos começar criando um componente super simples chamado
TodoList.vue
.Dentro da tag script, vamos criar um array com alguns ítens e duas funções. Uma para marca-los dependsendo se status for "true"또는 "false"e outra para adicionar novos ítens ao 배열:
<script setup>
import { ref } from "vue";
const todos = ref([
{ id: 0, title: "Create an article about renderless components", done: false },
{ id: 1, title: "Write some code", done: false },
{ id: 2, title: "Publish the article on linkedin", done: false },
]);
const toggleTodo = (id) => {
const todo = todos.value.find((todo) => todo.id === id);
if (todo) {
todo.done = !todo.done;
}
};
const addTodo = (event) => {
const data = new FormData(event.target);
event.target.reset();
todos.value.push({
id: todos.value.length,
title: data.get("title"),
done: false,
});
};
</script>
Agora, ainda no arquivo
TodoList.vue
, vamos criar o template responsável por renderizar esses ítens e executar as funções:<template>
<ul>
<li>
<form @submit.prevent="addTodo" class="mb-6 mt-3">
<input
type="text"
name="title"
class="bg-transparent border-b-2
outline-none accent-green-300"
placeholder="New Todo"
/>
</form>
</li>
<li v-for="todo in todos" :key="todo.title" class="py-1">
<input
class="accent-green-300"
type="checkbox"
:value="todo.done"
@click="toggleTodo(todo.id)"
/>
{{ todo.title }}
</li>
</ul>
</template>
O código inteiro do arquivo
TodoList.vue
ficará assim:<script setup>
import { ref } from "vue";
const todos = ref([
{
id: 0,
title: "Create an article about renderless components",
done: false,
},
{ id: 1, title: "Write some code", done: false },
{ id: 2, title: "Publish the article on linkedin", done: false },
]);
const toggleTodo = (id) => {
const todo = todos.value.find((todo) => todo.id === id);
if (todo) {
todo.done = !todo.done;
}
};
const addTodo = (event) => {
const data = new FormData(event.target);
event.target.reset();
todos.value.push({
id: todos.value.length,
title: data.get("title"),
done: false,
});
};
</script>
<template>
<ul>
<li>
<form @submit.prevent="addTodo" class="mb-6 mt-3">
<input
type="text"
name="title"
class="bg-transparent border-b-2
outline-none accent-green-300"
placeholder="New Todo"
/>
</form>
</li>
<li v-for="todo in todos" :key="todo.title" class="py-1">
<input
class="accent-green-300"
type="checkbox"
:value="todo.done"
@click="toggleTodo(todo.id)"
/>
{{ todo.title }}
</li>
</ul>
</template>
모든 할 일 목록에서 할 일 목록을 찾을 수 있는 구성 요소를 수리하고 Exibi-la에 대한 UI 응답을 할 수 있습니다.
Então, partir de agora vamos separar tudo, passando toda a logica de pai pra filho, utilizando slots.
Mas antes disso, se você não sabe o que são slots, você pode dar uma olhadinha na documentação oficial do Vue.js: Slots
A primeira coisa que vamos fazer é criar um componente pai e importar nosso componente filho
TodoList.vue
dentro dele.✨Dica: Você pode utilizar o arquivo
App.vue
, que já existe por padrão, para importar o componenteTodoList
.✨
<script setup>
import TodoList from "./components/TodoList.vue";
</script>
<template>
<main>
<TodoList />
</main>
</template>
Depois, no componente filho
TodoList.vue
, vamos substituir o código porum<slot>
e então fazer um bind com os nossos to-do's e as funções que criamos, dessa forma:<template>
<ul>
<slot
:todos="todos"
:toggleTodo="toggleTodo"
:addTodo="addTodo">
</slot>
</ul>
</template>
Agora precisamos fazer com que o componente pai tenha acesso aos dados do componente filho, então voltamos ao componente pai e adicionamos ao componente
<TodoList/>
um v-slot, passando nossa lista de to-do's e as funções addTodo
e toggleTodo
, 데사 형식:<TodoList v-slot="{ todos, addTodo, toggleTodo }">
//...
</TodoList>
일부는 HTML에서 구성 요소를 제거하기 위한 추가 포데모스
TodoList.vue
또는 v-슬롯 없음:<TodoList v-slot="{ todos, addTodo, toggleTodo }">
<li>
<form @submit.prevent="addTodo" class="mb-6 mt-3">
<input
type="text"
name="title"
class="bg-transparent border-b-2 outline-none accent-green-300"
placeholder="New Todo"
/>
</form>
</li>
<li v-for="todo in todos" :key="todo.title" class="py-1">
<input
class="accent-green-300"
type="checkbox"
:value="todo.done"
@click="toggleTodo(todo.id)"
/>
{{ todo.title }}
</li>
</TodoList>
Basicamente o código que antes estava dentro do componente
TodoList.vue
, agora ficará dentro dov-slot
no componente pai.Agora o componente pai ficará responsável por "injetar"as informações no componente filho e isso é o que vai permitir que a lógica seja reutilizada para a criação de novas listas, que podem possuir uma UI completamente diferente da que criamos nesse example.
UI를 수정하는 방법은 다음과 같습니다:
Muito Legal, né? Espero que você tenha entendido e gostado de ler até aqui, pois essa foi a forma que encontrei de fixar conteúdos na minha cabeça e ainda contribuir de alguma forma com a comunidade.
그란데 아브라소 에 차우우
Reference
이 문제에 관하여(Vue 3: 렌더리스 구성 요소에서 작동합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ygcorrea/vue-3-renderless-components-4nia텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)