什么是插槽?
插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制。
vue中插槽也是父子组件通讯的一种方式。
组件最大的特性就是复用性,插槽能大大提高组件的复用性。
组件插槽的基本使用
- <div id="app">
- <my-com>Hello my-com>
- <my-com>
- <a href="">点击a>
- my-com>
- <my-button>点击my-button>
- <my-button>提交my-button>
- <my-button @click="num++">
- <div>总共点击了{{num}}次div>
- my-button>
- div>
- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js">script>
- <script>
- var app=Vue.createApp({
- data:function(){
- return{
- num:0
- }
- },
- methods: {
- },
- });
- app.component("MyCom",{
- template:`<div class="my-com">
- 子组件
- <div>
- <slot>slot>
- div>
- div>`,
- });
- app.component("MyButton",{
- template:`<button>
- <slot>slot>
- button>`,
- });
- app.mount("#app");
- script>
具名插槽
- <div id="app">
- <my-com>
-
- <template v-slot:header>头部template>
- <template v-slot:default> 默认插槽template>
-
-
- <template #footer>底部template>
- my-com>
- div>
- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js">script>
- <script>
- var app=Vue.createApp({
- data:function(){
- return{
- num:0
- }
- },
- methods: {
- },
- });
- app.component("MyCom",{
- template:`<div class="my-com">
- <div class="header">
- <slot name="header">slot>
- div>
- <div class="body">
- <slot>slot>
- div>
- <div class="footer">
- <slot name="footer">slot>
- div>
- div>`,
- });
- app.mount("#app");
- script>
总之,slot存在于子组件,v-slot在父组件,最终页面展示结果是父组件!!!
作用域插槽:父组件对子组件的内容进行加工处理。
作用域插槽也可以理解为带数据的插槽,即带参数的插槽,简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用,父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。
- <div id="app">
- <my-com>
-
- <template v-slot:header="data">
-
- 头部
- {{data}}
- <br>
- {{data.msg}}
- template>
-
- <template v-slot:default="{msg:text,age}">
- 默认插槽
-
- {{text}}
- {{age}}
- template>
- <template #footer>底部template>
- my-com>
- div>
- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js">script>
- <script>
- var app=Vue.createApp({
- data:function(){
- return{
- num:0
- }
- },
- methods: {
- },
- });
- app.component("MyCom",{
- template:`<div class="my-com">
- <div class="header">
- <slot name="header" :msg="msg" :age="age">slot>
- div>
- <div class="body">
- <slot :msg="msg" :age="age">slot>
- div>
- <div class="footer">
- <slot name="footer">slot>
- div>
- div>`,
- data(){
- return{
- msg:"Jack",
- age:10,
- }
- }
- });
-
- app.mount("#app");
- script>
结果:
父组件给子组件数据,在父组件可以通过:data的形式实现:
- <div id="app">
- <my-com>
- <template v-slot:header :data="datas">
-
- 头部
- {{datas}}
- <br>
- {{datas.msg}}
- template>
- my-com>
- div>
补充:作用域插槽与element-plus的联合使用
- <div id="app">
- <el-table :data="tableData" style="width: 100%">
- <el-table-column label="日期" prop="date" width="180">
- el-table-column>
- <el-table-column label="名字" prop="name" width="180">
- <template #default="{row}"><span>{{row.name}}span>template>
- el-table-column>
- <el-table-column label="地址" prop="address" width="180">
- el-table-column>
- <el-table-column label="Operations">
- <template #default="{row}">
- <el-button @click="onClick(row)" type="success">详情el-button>
- template>
- el-table-column>
- el-table>
- div>
- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js">script>
- <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.10/index.full.min.js">script>
- <script>
- var app=Vue.createApp({
- data:function(){
- return{
- num:0,
- tableData:[
- {
- date: '2016-05-03',
- name: 'Tom',
- address: 'No. 189, Grove St, Los Angeles',
- },
- {
- date: '2018-05-20',
- name: 'Jack',
- address: 'No. 189, Grove St, Los Angeles',
- },
- {
- date: '2020-05-04',
- name: 'Rose',
- address: 'No. 189, Grove St, Los Angeles',
- },
- {
- date: '2022-11-29',
- name: 'Lucy',
- address: 'No. 189, Grove St, Los Angeles',
- },
- ]
- }
- },
- methods: {
- onClick(row){
- console.log(row);
- }
- },
- });
- app.use(ElementPlus);//注册组件
- app.mount("#app");
- script>