Vue slot 插槽
Vue About 3,733 words定义
插槽是Vue
为组件的封装者提供的能力。允许开发者在封装组件时把不确定的、希望用户指定的部分定义为插槽。
默认插槽
Vue
规定:每个slot
插槽,都要有一个 name 属性。
如果省略了slot
的name
属性,则有一个默认的名称:default
。
slot
组件
<template>
<div>
<h1>This is h1</h1>
<slot>
<h2>This is h2</h2>
</slot>
<slot name="slotName">
<h2>This is h2</h2>
</slot>
</template>
引用slot
组件
<template>
<p>Hello default</p>
</template>
<template v-slot:slotName>
<p>Hello slotName</p>
</template>
默认内容
官方叫做后备内容。
slot
标签中提供默认内容。
<slot>
<h2>This is h2</h2>
</slot>
引用时简写形式
引用slot
组件时,使用v-slot
指定需要将自定义内容替换默认内容。
v-slot
只能用在Component
或template
标签上。
v-slot:default
简写是#default
。
<template>
<div>
<SlotComponent>
<template #default>
<h5>This is h5</h5>
</template>
<template #slotName>
<p>Hello slotName</p>
</template>
</SlotComponent>
</div>
</template>
具名插槽
slot
中指定name
属性的插槽就是具名插槽。
作用域插槽
带数据的插槽,推荐使用scope
作为变量名来接收数据。
<template>
<div>
<slot name="slotName" msg="this is msg" :scope-data="scopeData">
This is slotName
</slot>
</div>
</template>
<script>
export default {
name: "SlotComponent",
data: () => ({
scopeData: {
"data1": "this is data1"
}
})
}
</script>
引用slot
组件,{msg, scopeData}
解构了传过来的对象。如果不解构需要再多一层对象。
<template>
<div class="home">
<SlotComponent>
<template #slotName="{msg, scopeData}">
<p>Hello slotName</p>
<p>{{ msg }} --- {{ scopeData.data1 }}</p>
<input type="text" v-model:value="scopeData.data1">
</template>
</SlotComponent>
</div>
</template>
具体应用
slot
组件
<template>
<div>
<h1>This is h1</h1>
<!-- Vue 规定:每个 slot 插槽,都要有一个 name 属性 -->
<!-- 如果省略了 slot 的 name 属性,则有一个默认的名称: default -->
<slot>
<h2>This is h2</h2>
</slot>
</div>
</template>
<script>
export default {
name: "SlotComponent"
}
</script>
引用slot
组件
<template>
<div class="home">
<SlotComponent>
<!-- 默认情况下填充到 default 插槽中 -->
<h3>This is h3</h3>
<h4>This is h4</h4>
<!-- v-slot 只能用在 Component 或 template -->
<!-- v-slot:default 简写是 #default -->
<template v-slot:default>
<h5>This is h5</h5>
</template>
<template v-slot:title="scope">
<p>
Hello Title
</p>
<p>
{{ scope }} --- {{ scope.msg }}
</p>
</template>
<template #body="scope">
<p>
Hello Body
</p>
<p>
{{ scope }} --- {{ scope.userInfo }}
</p>
<input type="text" v-model:value="scope.userInfo.name">
</template>
<template #tail="{msg, scopeData}">
<p>
Hello Tail
</p>
<p>
{{ msg }} --- {{ scopeData.data1 }}
</p>
<input type="text" v-model:value="scopeData.data1">
</template>
</SlotComponent>
</div>
</template>
<script>
// @ is an alias to /src
import SlotComponent from "@/components/SlotComponent";
export default {
name: 'HomeView',
components: {
SlotComponent,
},
}
</script>
Views: 831 · Posted: 2022-12-29
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...