您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)vue插槽slot怎么用的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
前言
Vue的slot插槽,可以從字面意思來了解用途,占用占坑的意思,既然是占坑肯定是先占坑后面有其他具體的內(nèi)容來替換代替。根據(jù)slot的應(yīng)用場(chǎng)景可以分為匿名slot和具名slot。
一、個(gè)人理解及插槽的使用場(chǎng)景
剛開始看教程我的疑惑是為什么要用插槽,它的使用場(chǎng)景是什么,很多解釋都是“父組件向子組件傳遞dom時(shí)會(huì)用到插槽”,這并不能很好的解決我的疑惑。既然你用了子組件,你為什么要給她傳一些dom,直接去定義復(fù)用的子組件不就好了。后來想想覺得一個(gè)復(fù)用的組件在不同的地方只有些許變化,如果去重寫子組件是很不明智的一件事,當(dāng)然也可以將不同之處都寫在子組件里,然后通過父組件傳來的標(biāo)識(shí)進(jìn)行選擇顯示。其實(shí)質(zhì)是對(duì)子組件的擴(kuò)展,通過slot插槽向組件內(nèi)部指定位置傳遞內(nèi)容,即將<slot></slot>元素作為承載分發(fā)內(nèi)容的出口;
二、用于理解的例子
目前還沒接觸到使用插槽解決實(shí)際問題很好的例子,只能這樣去為了理解插槽而用,可能并沒有很好的利用到插槽的好處。
在父組件定義想要傳入子組件作為插槽的內(nèi)容,App.vue
<template> <div id="app"> <div> <input type="text" v-model="info"> <button @click="handleClick">添加</button> </div> <todolist v-for="item in list" :key="item" :message="msg"> <template v-slot:item="itemProps" > <!-- tips1:<span>即為插槽內(nèi)容 tips2:item是插槽的名字,為具名插槽,可對(duì)應(yīng)插入到子組件中具體的插槽位置 tips3:itemProps可以獲取到子組件(即插槽 prop)傳出來的狀態(tài)(值), 插槽 prop 的對(duì)象命名為 itemProps,可任意命名,itemProps變量存在于 <template> 作用域中 --> <span :>{{item}}</span> </template> </todolist> </div> </template> <script> import todolist from './components/todolist.vue'; export default { name: 'App', components: { todolist }, data(){ return { msg: '4-2-05', info: '', list: [], } }, methods: { handleClick() { // 獲取到input輸入的東西,然后加入到數(shù)組中 this.list.push(this.info); this.info = '' } }, } </script> <style> </style>
在子組件利用<slot></slot>元素作為承載分發(fā)內(nèi)容的出口,父組件的插槽內(nèi)容將在其中顯示,todolist.vue
<template> <div> {{message}} <li class="item"> <input type="checkbox" v-model="checked"> <slot name="item" v-bind="{checked}" ></slot> <!--插槽內(nèi)容能夠訪問子組件中才有的數(shù)據(jù)是很有用的,又因?yàn)楦讣?jí)模板里的所有內(nèi)容都是在父級(jí)作用域中編譯的;子模板里的所有內(nèi)容都是在子作用域中編譯的 所以得想辦法獲取到子組件的數(shù)據(jù)。--> <!--給子組件綁定一個(gè)動(dòng)態(tài)參數(shù),checked作為一個(gè) <slot> 元素的特性綁定上去,綁定在 <slot> 元素上的特性被稱為插槽 prop--> </li> </div> </template> <script> export default { props: ['item','message'], // 因?yàn)楦附M件在插槽內(nèi)容里使用item, 即此句代碼<span>{{item}}</span> // 相當(dāng)于需要傳遞給子組件的內(nèi)容,也就是通常的父子組件通信,所以在子組件需要通過props來獲取 data() { return { checked: false, } }, created() { console.log(this.message); } } </script> <style scoped> .item { color: red; } li{ list-style: none; } </style>
三、具體知識(shí)點(diǎn)
1、具名插槽
上面的例子只使用了一個(gè)slot插槽,但有時(shí)我們?cè)谝粋€(gè)組件里可能會(huì)多處使用插槽,我們希望在不同的插槽處插入不同的內(nèi)容,此時(shí)便需要進(jìn)行區(qū)分,<slot> 元素有一個(gè)特殊的特性:name。這個(gè)特性可以用來定義插槽的名字,在向具名插槽提供內(nèi)容的時(shí)候,我們可以在一個(gè) <template> 元素上使用
v-slot 指令,并以 v-slot 的參數(shù)的形式寫出插槽的名稱,使其一一對(duì)應(yīng)。
<slot name="header"></slot> <slot name="content"></slot> <slot ></slot> //一個(gè)不帶 name 的 <slot> 出口會(huì)帶有隱含的名字“default”。
2、作用域插槽
為了使父組件的插槽內(nèi)容可以使用子組件的數(shù)據(jù),可以在 <slot> 元素上綁定想要傳遞的數(shù)據(jù),此特性被稱為插槽 prop。同時(shí)在父級(jí)作用域中,給 v-slot 帶一個(gè)值來定義我們提供的插槽 prop 的名字,便可獲取到。但此內(nèi)容只在 <template>作用域內(nèi)可用。
四、自 2.6.0 起有所更新的語法變化
1、帶有slot特性的具名插槽
2、帶有slot-scope特性的作用域插槽
五、突發(fā)奇想的調(diào)換
因?yàn)榭吹揭粋€(gè)別人寫的關(guān)于slot的帖子,他應(yīng)該是寫錯(cuò)了插槽在子父組件的內(nèi)容,這也就相當(dāng)于從子組件傳一個(gè)插槽內(nèi)容給父組件。仔細(xì)想想這思路有問題,既然都引用了子組件,父組件便可以訪問到子組件的所有內(nèi)容,現(xiàn)在卻非要通過插槽來傳遞,多此一舉。
然后我就試了一下將插槽內(nèi)容卸載子組件里,果然出現(xiàn)了報(bào)錯(cuò),如下:
- <template v-slot> can only appear at the root level inside the receiving the component(slot的只能出現(xiàn)在接受組件的根級(jí)別)
也就是只能在父組件使用。
感謝各位的閱讀!關(guān)于“vue插槽slot怎么用”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。