插槽一共就三大類
1.匿名插槽(也叫預設插槽): 沒有命名,有且只有乙個
2.具名插槽: 相對匿名插槽元件slot標籤帶name命名的
3.作用域插槽: 子元件內資料可以被父頁面拿到(解決了資料只能從父頁面傳遞給子元件)
一、匿名插槽(也叫預設插槽default
父頁面呼叫子元件
>
//子v-slot:default
>
//繫結匿名插槽
任意內容
>
我是匿名插槽 p
>
template
>
todo-list
>
//v-slot:default寫上感覺和具名寫法比較統一,容易理解,也可以不用寫
子元件todolist.vue
>
我是預設值slot
>
//無name預設default
父頁面呼叫子元件
>
v-slot:todo
>
任意內容
>
我是具名插槽 p
>
template
>
todo-list
>
子元件name
="todo"
>
我是預設值slot
>
//name指明插槽名字
##顯示##
// 任意內容
// 我是具名插槽
注意現在三、作用域插槽
1.重點是slotprops接取子元件裡:user=「user」 :test="test"類似屬性的資料，繫結在元素上的 attribute 被稱為插槽 prop。
父頁面
第一種寫法
>
v-slot:todo=""
>
//父頁面內容跟子元件對應上
}//直接可以使用子元件屬性，這裡是覆蓋子元件內容的
template
>
todo-list
>
//第二種寫法
>
v-slot:todo
="slotprops"
>
}template
>
todo-list
>
//slotprops 可以隨意命名
//slotprops 接取的是子元件標籤slot上屬性資料的集合所有v-bind:user="user"
子元件name
="todo"
:user
="user"
:test
="test"
>
}slot
>
data() ,
test:[1,2,3,4]}},
// }是預設資料 v-slot:todo 當父頁面沒有(="slotprops")
// 時顯示 zhang
## 顯示 ##
// yue
有時為了讓插槽內容能夠訪問子元件中才有的資料是很有用的。例如，設想乙個帶有如下模板的元件：
>
>
}slot
>
span
>
>
}current-user
>
為了讓 user 在父級的插槽內容中可用，我們可以將 user 作為 元素的乙個 attribute 繫結上去：
>
v-bind:user
="user"
>
}slot
>
span
>
>
v-slot:default
="slotprops"
>
}template
>
current-user
>
vue 2 6 插槽v slot用法記錄
總結vue2.6統一了插槽的語法v slot 在其他元件中使用child元件 hello world child元件 上面是具名插槽的用法，省略插槽名 name屬性或插槽名為default表示匿名插槽 在其他元件中使用child元件 用法一 常規用法，slotprops為自定義作用網域名稱 hell...
Vue2 6 父子元件之間值傳遞
父元件 子元件 v bind index key 簡寫 index key 遍歷list的時候 將每一項的值賦值給value 每一項的下標賦值給key 把value值通過v bind繫結到變數 content上 把key值通過v bind繫結到變數 index上 傳遞給to do list元件 子元...
Vue 插槽詳解
vue插槽，是學習vue中必不可少的一節，當初剛接觸vue的時候，對這些掌握的一知半解，特別是作用域插槽一直沒明白。後面越來越發現插槽的好用。分享一下插槽的一些知識吧。分一下幾點 1 插槽內可以放置什麼內容？2 預設插槽 3 具名插槽 4 作用域插槽 一 插槽內容 一句話 插槽內可以是任意內容。先看...