溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Vue插槽slot使用的方法是什么”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue插槽slot使用的方法是什么”文章能幫助大家解決問題。
我們都知道在父子組件間可以通過v-bind,v-model搭配props 的方式傳遞值，但是我們傳遞的值都是以一些數字，字符串為主，但是假如我們要傳遞一個div或者其他的dom元素甚至是組件，那v-bind和v-model搭配props的方式就行不通了，但是插槽(slot)可以，插槽可以傳遞dom元素，在子組件中通過接收使用父組件傳遞過來的dom元素，我的理解就是在定義一個組件時，有些dom是動態顯示的，即子組件現在不清楚調用它的組件需要咋顯示，是顯示button還是div，所以使用slot先占一個位置，父組件確定要顯示的dom后再顯示。
假設我們要實現一個form表單組件，由一個輸入框和一個按鈕組成，如下圖
這時候按鈕的樣式可能是多樣的，有的人喜歡使用button,有的喜歡使用div,所以這里我們可以將顯示按鈕的這里定義成一個插槽，子組件的定義如下：
app.component('my-form',{
methods:{
handleClick(){
alert(123);
}
},
template:
` <div>
<input />
<span @click="handleClick">
<slot></slot> //定義插槽
</span>
</div>
`
});注意： slot 插槽上面是無法綁定事件的，可以在上面使用一個<span>標簽專門綁定事件
使用插槽：我們在使用插槽的時候可以傳遞一個div
<my-form>
<div>{{text}}</div>
</my-from>可以傳遞一個button
<my-form>
<button>{{text}}</button>
</my-from>還可以傳遞一個組件
定義一個test組件
app.component('test',{
template:`<div>hello world</div>`
})傳遞組件給子組件
<my-form> <test /> </my-from>
所有測試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue使用插槽</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
text:"提交111"
}
},
template:
`
<my-form>
<div>{{text}}</div>
</my-from>
<my-form>
<button>{{text}}</button>
</my-from>
<my-form>
<test />
</my-from>
`
});
app.component('test',{
template:`<div>hello world</div>`
})
app.component('my-form',{
methods:{
handleClick(){
alert(123);
}
},
template:
` <div>
<input />
<span @click="handleClick">
<slot>default</slot>
</span>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>注意：我們在定義子組件的插槽時： <slot>default</slot> 會在slot中間寫一個defult這里其實是為了做一個默認值處理，也就是父組件什么也不傳的時候，我們就顯示默認的值不加這個默認值，頁面顯示會有問題
運行結果：
我們的一個web頁面結構分為：header,content,footer，我們要把header，footer做成一個插槽，讓其顯示：
按照我們第一小節的做法：
定義一個組件：
app.component('layout',{
template:`
<div>
<slot></slot>
<div>content</div>
</div>
`
});使用：
template: ` <layout> <div >header</div> <div >footer</div> </layout> `
運行后我們發現不太對：
content無法放到header和footer之間，所以我們需要使用具名插槽，給插槽一個具體的名字，好擺放其位置：
把布局組件定義為：
app.component('layout',{
template:`
<div>
<slot name = "header"></slot>
<div>content</div>
<slot name = "footer"></slot>
</div>
`
});使用插槽時：
const app = Vue.createApp({
// 具名插槽
template:
`
<layout>
<template v-slot:header>
<div >header</div>
</template>
<template v-slot:footer>
<div >footer</div>
</template>
</layout>
`
});提示：具名插槽可以使用#header方式代替v-slot:header
所有測試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用具名插槽</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// 具名插槽
template:
`
<layout>
<template v-slot:header>
<div >header</div>
</template>
<template v-slot:footer>
<div >footer</div>
</template>
</layout>
`
});
app.component('layout',{
template:`
<div>
<slot name = "header"></slot>
<div>content</div>
<slot name = "footer"></slot>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>運行結果：
這樣content就被準確的放到了中間啦。
當我們在使用插槽時，父組件想使用子組件的值，我們就可以使用作用域插槽。
假設定義了一個list組件，在子組件中提供了一組list值，父組件想使用這個list的值。定義組件的代碼如下：
app.component('list',{
data(){
return{list:[1,2,3]}
},
template:
`
<div>
<slot v-for="item in list" :item="item" />
</div>
`
});使用時如下：
const app = Vue.createApp({
// 解構語法
template:
`
<list v-slot="slotProps">
<span>{{slotProps.item}}</span>
</list>
`
});這里使用的時候可以使用解構語法，寫成：
// 解構語法
template:
`
<list v-slot="{item}">
<div>{{item}}</div>
</list>
`這里需要注意v-slot="{item}里面的item必須和<slot v-for="item in list" :item="item" />這里對應，不然無法渲染出來
關于“Vue插槽slot使用的方法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
