Vue 插槽 默认插槽 具名插槽 作用域插槽
Vue 插槽 默认插槽 具名插槽 作用域插槽
插槽的作用:
父组件向子组件的指定位置插入一段html. 也是一种组件间通信方式,适用于父传子
定义插槽内容:将内容写在组件标签体中
定义插槽默认内容: 将默认内容写在插槽标签体中
定义插槽内容展示位置:
默认插槽:在组件中将slot标签写你想要展示的位置
具名插槽:在组件标签体中给元素添加slot属性,值为对应插槽名; 在组件slot标签添加对应name属性即可
作用域插槽: 插槽的定义者给插槽的使用者传递数据。template+scope | slot+v-bind
案例:默认插槽
App.vue
<template>
<div id="app">
<TodoHeader >
<input type="text" placeholder="默认插槽来个文本框">
</TodoHeader>
</div>
</template>
<script>
import TodoHeader from "./components/TodoHeader.vue";
export default {
name: "App",
components: { TodoHeader },
};
</script>
TopHeader.vue
<template>
<h1 class="header">
<slot> 默认插槽,插槽没有内容时随便展示点什么。。。。 </slot>
</h1>
</template>
<script>
export default {};
</script>
案例:具名插槽
app.vue
<template>
<div id="app">
<TodoHeader >
<input type="text" placeholder="默认插槽来个文本框">
<div slot="footer">footer content</div>
<div slot="header">header content</div>
</TodoHeader>
</div>
</template>
<script>
import TodoHeader from "./components/TodoHeader.vue";
export default {
name: "App",
components: { TodoHeader },
};
</script>
TopHeader.vue
<template>
<div class="con">
<div class="header">
头部
<slot name="header">
默认插槽,插槽没有内容时随便展示点什么。。。。
</slot>
</div>
<div class="center">
默认插槽
<div>
<slot>插槽没有内容时随便展示点什么。。。。 </slot>
</div>
</div>
<div class="footer">
尾部
<slot name="footer">
插槽没有内容时随便展示点什么。。。。
</slot>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.con {
width: 800px;
/* height: 50px; */
font-size: 16px;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
}
.header {
background: lightseagreen;
}
.center {
background: lightskyblue;
}
.footer {
background: lightpink;
}
</style>
作用域插槽
app.vue
<template>
<div id="app">
<ScopeSlot>
<template slot-scope="dataByScopeSlot">
<ul>
<li v-for="(item,index) in dataByScopeSlot.myData" :key="index">
{{item}}
</li>
</ul>
</template>
</ScopeSlot>
</div>
</template>
<script>
import ScopeSlot from "./components/ScopeSlot.vue";
export default {
name: "App",
components: { ScopeSlot }
};
</script>
ScopeSlot.vue
<template>
<div class="con">
<slot :myData="dataArr"></slot>
</div>
</template>
<script>
export default {
data:()=>({dataArr:[1,2,3]})
};
</script>
<style scoped>
.con {
width: 800px;
font-size: 16px;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
}
.header {
background: lightseagreen;
}
.center {
background: lightskyblue;
}
.footer {
background: lightpink;
}
</style>