网站建设国家和行业标准,用php开发网站教程,长沙网站维护公司,企业信息查询系统官网北京第IV章-Ⅱ Vue3中的插槽使用 基本插槽默认内容 具名插槽作用域插槽 在 Vue 3 中#xff0c;插槽#xff08;slots#xff09;是一种强大的模式#xff0c;用于将模板代码从父组件注入到子组件中#xff0c;使得子组件的内容可以在使用时被自定义。Vue 3 中的插槽用法包括基… 第IV章-Ⅱ Vue3中的插槽使用 基本插槽默认内容 具名插槽作用域插槽 在 Vue 3 中插槽slots是一种强大的模式用于将模板代码从父组件注入到子组件中使得子组件的内容可以在使用时被自定义。Vue 3 中的插槽用法包括基本插槽、具名插槽和作用域插槽。
基本插槽
基本插槽允许父组件向子组件传递内容这些内容在子组件的模板中通过一个简单的 标签进行定义和显示。
子组件
templatedivslot/slot !-- 默认插槽 --/div
/templatescript langts
import { defineComponent } from vue;export default defineComponent({name: ChildComponent
});
/script父组件
templatedivChildComponentpThis content will go into the default slot of the ChildComponent./p/ChildComponent/div
/templatescript langts
import { defineComponent } from vue;
import ChildComponent from ./ChildComponent.vue;export default defineComponent({name: ParentComponent,components: {ChildComponent}
});
/script
默认内容
可以在 标签内部指定默认内容如果父组件没有提供任何插槽内容将显示默认内容。
子组件
templatedivslotDefault content if nothing is provided by the parent./slot/div
/template
具名插槽
具名插槽允许你为不同的插槽内容定义多个插槽每个插槽都有其唯一的名字。这样父组件可以针对特定的插槽提供内容。
子组件
templatedivslot nameheader/slotslot namemain/slotslot namefooter/slot/div
/templatescript langts
import { defineComponent } from vue;export default defineComponent({name: ChildComponent
});
/script父组件
templateChildComponenttemplate v-slot:headerh1Header Content/h1/templatetemplate v-slot:mainpMain Content of the Page/p/templatetemplate v-slot:footerfooterFooter Details/footer/template/ChildComponent
/templatescript langts
import { defineComponent } from vue;
import ChildComponent from ./ChildComponent.vue;export default defineComponent({name: ParentComponent,components: {ChildComponent}
});
/script
作用域插槽
作用域插槽Scoped Slots是 Vue 中一种高级的插槽用法允许子组件将其内部的数据传递回给使用这些插槽的父组件的插槽内容。这种方式不仅可以让父组件插入 HTML 或组件还能让父组件访问子组件中定义的数据非常适合创建高度可定制和复用的组件。
子组件
templateul!-- 使用作用域插槽将 todo 对象作为插槽的数据传递给父组件 --li v-fortodo in todos :keytodo.idslot nametodo :todo-datatodo!-- 默认内容如果父组件没有提供插槽模板 --{{ todo.text }}/slot/li/ul
/templatescript langts
import { defineComponent, PropType } from vue;export default defineComponent({name: TodoList,props: {todos: Array as PropTypeArray{ id: number; text: string }}
});
/script父组件
templateTodoList :todostodoItems!-- 定义如何使用 todo 数据渲染每个待办事项 --template v-slot:todo{ todo }strong{{ todo.text }}/strong (ID: {{ todo.id }})/template/TodoList
/templatescript langts
import { defineComponent, ref } from vue;
import TodoList from ./components/TodoList.vue;export default defineComponent({name: App,components: {TodoList},setup() {const todoItems ref([{ id: 1, text: Finish the report },{ id: 2, text: Meet with the client },{ id: 3, text: Prepare presentation }]);return { todoItems };}
});
/script
子组件提供了一个todo插槽每一个todo的数据通过todo-data传递给插槽。父组件接收这个数据并自定义了如何显示每个项目。 提示v-slot:todo 简写 #todotodo
