插槽
作用：官方解釋就是vue實作一套內容分發機制，將
，就是視圖層和資料層進行展示的時候不要直接系結資料，而是進行資料的上傳
個人理解，就還是父子組件的傳值
就像是父組件你把東西給我，我用用，然后我把我全部的加上你給我的一塊給你
- 在官網上邊 父到子 是prope 傳值 ，在父組件顯示子組件的內容
- 在官網上邊 子到父 是事件傳值 ，衍生出官網的自定義事件，
這兩個都時進行資料上傳下發 - 插槽就不一樣了 （你先明白為什么要在父組件里面參考子組件，因為這是子組件可以共用是吧 舉個例子 表格 我的父組件就是一個表格 里邊沒有內容 子組件就是一個個的行 我呼叫子組件的來顯示，然后呢我還想子組件里面顯示相應的內容 用傳值不行）就得用插槽了
基本使用--很簡單的例子：
子組件:
<template>
<div>
<h2>你叫什么名字</h2>
<slot></slot>
</div>
</template>
<script>
export default{
name:'children'
}
</script>
父組件:
<template>
<div>
<p>使用solt傳值:我來告訴你你叫什么名字</p>
<div style="color:red;">
<children>
<div>你的名字叫小坦克</div>
</children>
</div>
</div>
</template>
<script>
import children from "./zi";
export default {
components: {
children
}
};
</script>
具名插槽（在多個插槽時進行名字區分）
舉例子：
子組件
<template>
<div>
<div>
<h2>爸爸的名字</h2>
<slot name="fathername"></slot >
</div>
<div>
<h2>媽媽的名字</h2>
<slot name="mothername"></slot >
</div>
</div>
</template>
<script>
export default {
name: "children"
};
</script>
父組件:
<template>
<div>
<p>使用solt傳值:爸爸媽媽的名字叫什么</p>
<div style="color:red;">
<children>
<template v-slot:fathername>
<p>小坦克的爸爸</p>
</template>
<template v-slot:mothername>
<p>小坦克的媽媽</p>
</template>
</children>
</div>
</div>
</template>
<script>
import children from './zi'
export default {
components:{
children
}
};
</script>
注意：
- 父級的填充內容如果指定到子組件的沒有對應名字插槽，那么該內容不會被填充到默認插槽中，
- 如果子組件沒有默認插槽，而父級的填充內容指定到默認插槽中，那么該內容就“不會”填充到子組件的任何一個插槽中，
- 如果子組件有多個默認插槽，而父組件所有指定到默認插槽的填充內容，將“會” “全都”填充到子組件的每個默認插槽中，
作用域插槽
有個描述寫的很好
作用域插槽其實就是帶資料的插槽，即帶引數的插槽，簡單的來說就是子組件提供給父組件的引數，該引數僅限于插槽中使用，父組件可根據子組件傳過來的插槽資料來進行不同的方式展現和填充插槽內容，
例子：簡單點實體，簡單了解，明白用法
子組件
<template>
<div class="card-wrap">
<div class="foot">
<slot name="todo" v-bind:user="user">
</slot>
</div>
</div>
</template>
<script>
export default {
data(){
return{
user:{
lastname:'qiao',
age:12,
firstName:'zhang'
}
}
}
}
</script>
父組件：
<Card>
<template v-slot:todo="slotProps">
{{slotProps.user.age}}
{{slotProps.user.lastname}}
</template>
</Card>
//slotProps 可以隨意命名
//slotProps 接取的是子組件標簽slot上屬性資料的集合所有v-bind:user="user"
這只是簡單的應用
在此有一個例子用來顯示
https://www.jianshu.com/p/e10baeff888d
介紹相應的插槽使用
加以理解
有個例子
就是寫商城 你想里邊不是有很多的 欄目 商品對吧
在我們的初衷肯定是要在寫的時候進行相應的分類的，細化到模塊進行書寫對吧，然后商品串列本來就很多，從服務器取回資料要進行相應的渲染，肯定要用到回圈，每個商品的格式都是一樣的啊
步驟：
1.首先我們把一個商品單獨列出來，寫成一個小組件，商品卡片，例如我們新建一個 food.vue
然后呢我們在 商品展示串列 foodlist.vue 里面進行資料的展示
就是取到資料 寫一個 v-for 回圈商品卡片顯示
//明白代碼的意思就行
<food v-for="(item , index) in commodities :fooddata=https://www.cnblogs.com/tcz1018/p/"fooddata" @clickfood="onFoodClick" ">
2.在子組件里面進行資料的上傳到父組件
意思就是food.vue 組件使用點擊事件上傳自己id 可以在父組件里面進行相應的操作比如跳轉到詳情頁
拓展：
比如上邊的那個圖片 里面有好幾個相應的欄目，每個里面都有相應的商品那我們就可以用插槽了是不是 （插槽不就是可以把相應的要展示的東西模板啥的傳進去顯示嗎 這是我看到這個例子的第一反應） 對吧 在整個的首頁上面 把每個欄目抽成組件 來用 在每個組件里面顯示相應的商品卡片就是插槽
大體邏輯就是這樣 實作 組件和業務的分離
但是具體的細化我沒有認真理解透 有時間再來弄
插槽相應的注意事項及了解
1：縮寫 (v-slot:) 替換為字符 #，例如 v-slot:header 可以被重寫為 #header：
2.廢棄的語法 但是還在用 在有的組件庫里面會有的
//在 <template> 上使用特殊的 slot attribute，可以將內容從父級傳給具名插槽
<template slot="header">
<h1>Here might be a page title</h1>
</template>
// 或者直接把 slot attribute 用在一個普通元素上：
<h1 slot="header">Here might be a page title</h1>
//或者有 slot-scope attribute 的作用域插槽
//在 <template> 上使用特殊的 slot-scope attribute，可以接收傳遞給插槽的 prop (把這里提到過的 <slot-example> 組件作為示例)：
<slot-example>
<template slot="default" slot-scope="slotProps">
{{ slotProps.msg }}
</template>
</slot-example>
//這里的 slot-scope 宣告了被接收的 prop 物件會作為 slotProps 變數存在于 <template> 作用域中，你可以像命名 JavaScript 函式引數一樣隨意命名 slotProps，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/76019.html
標籤：JavaScript