插槽的作用
让用户可以拓展组件,去更好地复用组件和对其做定制化处理。
Vue 实现了一套内容分发的 API,将<slot>元素作为承载分发内容的出口,这是vue文档上的说明。具体来说,slot就是可以让你在组件内添加内容的‘空间’。
父组件在引用子组件时希望向子组价传递模板内容<p>测试一下吧内容写在这里了能否显示</p>
子组件让父组件传过来的模板内容在所在的位置显示
子组件中的<slot>就是一个槽,可以接收父组件传过来的模板内容,<slot> 元素自身将被替换
<myslot></myslot>组件没有包含一个 <slot> 元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃
插槽的分类
vue 在 2.6 版本中,对插槽使用 v-slot 新语法,取代了旧语法的 slot 和 slot-scope,并且之后的 Vue 3.0 也会使用新语法,这并不是仅写法的不同,还包括了性能的提升
插槽分为普通插槽和作用域插槽,普通插槽为父组件传递数据/元素/组件给子组件,而子组件定义 <slot> 接收,当插槽有多个的时候,需要使用具名插槽 <slot name="xxx">,用于将数据绑定在指定的插槽
普通插槽
// 父组件 <template v-slot> <p>new Nian糕</p> </template> // 旧语法 只需一行:<p slot>old Nian糕</p> // 子组件 <slot />
具名插槽
// 父组件 <template v-slot:item> <p>new Nian糕</p> </template> // 旧语法:<p slot="item">old Nian糕</p> // 子组件 <slot name="item" />
作用域插槽为子组件 <slot> 绑定属性,传递数据给父组件,父组件通过 v-slot:xxx="props" 接收子组件传递的属性
作用域插槽 旧语法
// 父组件 <p slot="love" slot-scope="props">爱old {{ props.name }}真是太好了</p> // 子组件 <slot name="love" v-bind="{ name }" /> export default { data() { return { name: "Nian糕" } } }
作用域插槽 新语法
// 父组件 <template v-slot:love="props"> <p>爱new {{ props.name }}真是太好了</p> </template> // 子组件 <slot name="love" v-bind="{ name }" /> export default { data() { return { name: "Nian糕" } } }
案例2
//子组件 : (假设名为:ebutton) <template> <div class= 'button'> <button> test</button> <slot name= 'one' :value1='child1'> 这就是默认值1</slot> //绑定child1的数据 <slot :value2='child2'> 这就是默认值2 </slot> //绑定child2的数据,这里我没有命名slot </div> </template> <script> new Vue({ el:'.button', data:{ child1:'数据1', child2:'数据2' } }) </script> //父组件:(引用子组件 ebutton) <template> <div class= 'app'> <ebutton> <template v-slot:one = 'slotone'> {{ slotone.value1 }} // 通过v-slot的语法 将子组件的value1值赋值给slotone </template> <template v-slot:default = 'slottwo'> {{ slottwo.value2 }} // 同上,由于子组件没有给slot命名,默认值就为default </template> </ebutton> </div> </template>
Vue3.0 slot简写
<!-- 父组件中使用 --> <template v-slot:content="scoped"> <div v-for="item in scoped.data">{{item}}</div> </template> <!-- 也可以简写成: --> <template #content="{data}"> <div v-for="item in data">{{item}}</div> </template>
Vue3.0在JSX/TSX下如何使用插槽(slot)
先看看官方: https://github.com/vuejs/jsx-next/blob/dev/packages/babel-plugin-jsx/README-zh_CN.md#插槽
在 jsx 中,应该使用 v-slots 代替 v-slot
const A = (props, { slots }) => ( <div> <h1>{ slots.default ? slots.default() : 'foo' }</h1> <h2>{ slots.bar?.() }</h2> </div> ); const App = { setup() { const slots = { bar: () => <span>B</span>, }; return () => ( <A v-slots={slots}> <div>A</div> </A> ); }, }; // or const App = { setup() { const slots = { default: () => <div>A</div>, bar: () => <span>B</span>, }; return () => <A v-slots={slots} />; }, }; // or const App = { setup() { return () => ( <> <A> {{ default: () => <div>A</div>, bar: () => <span>B</span>, }} </A> <B>{() => "foo"}</B> </> ); }, };
上面代码来源:Vue3.0在JSX/TSX下如何使用插槽(slot) Vue3.0在JSX/TSX下如何使用插槽(slot) - PinkChampagne - 博客园
关于jsx的,可以瞅瞅:vue3下jsx教学,保证业务上手无问题!vue3下jsx教学,保证业务上手无问题!手敲代码,有知识点,附带和template对比 - 掘金
vue3 template与jsx写法对比
ue template中的slot插槽如何在JSX中实现?和template对比,更加清晰
template写法
子组件
<template> <div> <span>I'm Child</span> <slot></slot> <slot name="header"></slot> </div> </template> <script> export default { name: "Test" } </script>
父组件
<template> <TestComponent> <template #default> <span>这是默认插槽</span> </template> <template #header> <span>这是header插槽</span> </template> </TestComponent> </template> <script> import TestComponent from './TestComponent' export default { name: "Parent", components: { TestComponent } } </script>
JSX的写法:
子组件
import { defineComponent } from "@vue/runtime-core"; export default defineComponent({ name: "Test", render() { return ( <> <span>I'm Child</span> { this.$slots.default?.() } { this.$slots.header?.() } </> ) } })
作用域插槽
import { defineComponent } from "@vue/runtime-core"; export default defineComponent({ name: "Test", setup() { return { value: { name: 'xzw' } } }, render() { return ( <> <span>I'm Child</span> { this.$slots.content?.(this.value) } </> ) } })
父组件
import { defineComponent } from 'vue' import TestComponent from './TestComponent' export default defineComponent({ name: "Test", components: { TestComponent }, render() { return ( <TestComponent v-slots={{ default: () => ( <div>这是默认插槽</div> ), header: () => ( <div>这是header插槽</div> ) }}> </TestComponent> ) } })
作用域插槽
import { defineComponent } from 'vue' import TestComponent from './TestComponent' export default defineComponent({ name: "Test", components: { TestComponent }, render() { return ( <TestComponent v-slots={{ content: scope => ( <div>{scope.name}</div>) }}> </TestComponent> ) } })
参考文章:
Vue3中的 JSX 以及 jsx插槽的使用 Vue3中的 JSX 以及 jsx插槽的使用(随便聊系列) - 掘金
Vue3 中插槽(slot)的用法 Vue3 中插槽(slot)的用法 - 是阿恒呀 - 博客园
vue3 学习 之 vue3使用 vue3 学习 之 vue3使用 - 简书
【vue3】 使用JSX实现普通、具名和作用域插槽 【vue3】 使用JSX实现普通、具名和作用域插槽_搬砖的猿@的博客-CSDN博客_jsx 作用域插槽
转载本站文章《vue2升级vue3:Vue2/3插槽——vue3的jsx组件插槽slot怎么处理》,
请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8683.html