點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

詳解vue2.6插槽更新v-slot用法總結

來源：懂視網責編：小采時間：2020-11-27 22:00:10

詳解vue2.6插槽更新v-slot用法總結

詳解vue2.6插槽更新v-slot用法總結:在 2.6.0 中，我們為具名插槽和作用域插槽引入了一個新的統一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的特性。新語法的由來可查閱 RFC。引vue官方文檔之前做項目時,對插槽理解太少了,這兩天

推薦度：

點擊下載本文 文檔為doc格式

導讀詳解vue2.6插槽更新v-slot用法總結:在 2.6.0 中，我們為具名插槽和作用域插槽引入了一個新的統一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的特性。新語法的由來可查閱 RFC。引vue官方文檔之前做項目時,對插槽理解太少了,這兩天

在 2.6.0 中，我們為具名插槽和作用域插槽引入了一個新的統一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的特性。新語法的由來可查閱 RFC。

引vue官方文檔

之前做項目時,對插槽理解太少了,這兩天學習時,才發現插槽更新用v-slot了,自己做了些簡單總結,與大家分享一下~

插槽

我的理解就是父頁面在組件標簽內插入任意內容,子組件內插糟slot控制擺放位置(匿名插槽,具名插槽)

插槽分類

插槽一共就三大類
1.匿名插槽(也叫默認插槽): 沒有命名,有且只有一個
2.具名插槽: 相對匿名插槽組件slot標簽帶name命名的
3.作用域插槽: 子組件內數據可以被父頁面拿到(解決了數據只能從父頁面傳遞給子組件)

匿名插槽(也叫默認插槽default)

用法:我的理解,匿名插糟只需要一個.(就是這些,不太復雜)

父頁面:

 <todo-list> 
 <template v-slot:default>
 任意內容
 <p>我是匿名插槽 </p>
 </template>
</todo-list> 
//v-slot:default寫上感覺和具名寫法比較統一,容易理解,也可以不用寫

子組件 todoList.vue

<slot>我是默認值</slot>
##顯示##
// 任意內容
// 我是匿名插槽

具名插槽(name)

用法:我的理解,和匿名插槽比較,就是必須起名todo對應,可以有多個具名插槽.(沒了~)

父頁面

 <todo-list> 
 <template v-slot:todo>
 任意內容
 <p>我是匿名插槽 </p>
 </template>
</todo-list> 
// todo
data() {
 return {
 dynamicSlotName:"todo" 
 }

 },

子組件

<slot name="todo">我是默認值</slot>
##顯示##
// 任意內容
// 我是匿名插槽

對 v-slot:todo 做操作:

動態命名

v-slot:{dynamicSlotName}//替換標簽上 v-slot:todo

具名插槽縮寫(匿名插槽用法)(可以后看)

#todo 替換標簽上 v-slot:todo

匿名如果想用必須加上default

#default 替換標簽上 v-slot:todo

父級模板里的所有內容都是在父級作用域中編譯的；子模板里的所有內容都是在子作用域中編譯的。

作用域插槽

1.重點是slotProps接取子組件里:user="user" :test="test"類似屬性的數據

父頁面

<todo-list>
 <template v-slot:todo="slotProps" >
 {{slotProps.user.firstName}}
 </template> 
</todo-list> 
//slotProps 可以隨意命名
//slotProps 接取的是子組件標簽slot上屬性數據的集合所有v-bind:user="user"

子組件

 <slot name="todo" :user="user" :test="test">
 {{ user.lastName }}
 </slot> 
data() {
 return {
 user:{
 lastName:"Zhang",
 firstName:"yue"
 },
 test:[1,2,3,4]
 }
 },
// {{ user.lastName }}是默認數據 v-slot:todo 當父頁面沒有(="slotProps")
// 時顯示 Zhang


## 顯示 ##
// yue

解構插槽Prop

父頁面 (子組件不變顯示一樣)

// 相當于
function (slotProps) {
 // 插槽內容
}
(slotProps)=>參數可以用slot標簽上現有的值({user,test})替換

<todo-list>
 <template v-slot:todo="{user,test}
" >
 {{user.firstName}}
 </template> 
</todo-list> 
## 顯示 ##
## // yue

參數值替換名字(可以后看)

<todo-list>
 <template v-slot:todo="{user:person,test}
" >
 {{person.firstName}}
 </template> 
</todo-list> 

// v-slot:[dynamicSlotName]="{user:person,test}
## 顯示 ##
## // yue

獨占默認插槽縮寫(可以后看)
感覺沒什么機會用,限制條件太多

總結

在用上v-slot之后只需要考慮好

1.是否需要命名(匿名插槽,具名插槽)
2.父頁面是否需要取存在子頁面的數據(作用域插槽)

todo-list實例

可以試一下,便于理解~

父頁面

<template>
 <div>
 新插槽 v-slot 代替具名插槽 作用于插槽
 <todo-list
 > 
 <template #todo="{todos:list}">
 <div @click = type(todos.id)>
 {{list.text}}
 </div>
 
 </template>
 </todo-list> 
 </div >
</template>
<script>
import todoList from "@/components/component/slotTodoChildren";
export default {
 name:"vSlot",
 components:{
 todoList
 },
 data() {
 return {

 }
 },
 methods: {
 type(data){
 console.log(data)
 }
 },
}
</script>

子組件

<template>
 <ul class="slotTodoChildren">
 <li class="lis"
 v-for="todo in todoList"
 v-bind:key="todo.id"
 >
 <!--
 我們為每個 todo 準備了一個插槽，
 將 `todo(todoList里的)` 對象作為一個插槽的 prop 傳入。
 -->
 <slot name="todo" :todos="todo">
 <!-- 后備內容 -->
 {{ todo.text }}
 </slot>
 </li>
 </ul>
</template>
<script>
export default {
 name:"slotChildren",

 data() {
 return {
 todoList:[
 {
 id:1, 
 text:"掃地"
 },
 {
 id:2,
 text:"做飯"
 },
 {
 id:3,
 text:"擦桌子"
 }
 ]
 }
 },
 created(){
 console.log(this.filteredTodos)
 }
}
</script>
<style scoped>
.slotTodoChildren .lis{
 display: block;
 background: #434534;
 line-height:40px;
 margin-top: 10px;
 color: #fff;
 font-size: 24px;
 height: 40px;
}
</style>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

詳解vue2.6插槽更新v-slot用法總結

推薦度：

點擊下載本文 文檔為doc格式

標簽： 2.6 插槽詳解vue2.6插槽更新v-slot用法總結

熱門焦點

詳解vue2.6插槽更新v-slot用法總結

詳解vue2.6插槽更新v-slot用法總結

詳解vue2.6插槽更新v-slot用法總結

最新推薦

猜你喜歡

熱門推薦