slot 插槽的基本認識
前幾篇的内容都是父子元件通過屬性傳值或者事件傳值這樣的. 本篇來學習父元件在調用子元件時, 如果想要給子元件傳遞特定的内容 (dom) , 則可通過 slot 這個設計來輕易實作哦.
例如現在有這樣一個場景:
元件複用
<!DOCTYPE html>
<html lang="en">
<head>
<title>元件複用</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template: `
<Son />
<Son />
`
})
app.component('Son', {
methods: {
handleClick () {
alert(666)
}
},
template: `
<div>
<input />
<div @click="handleClick">送出</div>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html> slot 初識
在父元件中, 調用了 2 次 Son 元件, 但咱希望第一次的是個 div, 第二次是個 button 的效果, 即可使用 slot 這種設計在父元件中調用子元件時給它 "增加内容":
<!DOCTYPE html>
<html lang="en">
<head>
<title>slot</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template: `
<son>
<div>送出</div>
</son>
<son>
<button>送出</button>
</son>
`
})
app.component('son', {
methods: {
handleClick () {
alert(666)
}
},
template: `
<div>
<input />
<span @click="handleClick">
<slot></slot>
</span>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html> 簡單來梳理這個 slot 的使用流程則是:
- slot 的能實作父元件在調用子元件時, 直接往裡面寫内容 dom
- 子元件命名要小寫, 父元件在調的時候以雙标簽的方式往裡面添加 dom
- 子元件直接用 slot 這個雙标簽進行引用即可, 但其不能綁事件, 但可通過外包一層正常标簽即可
slot 資料作用域
通常在元件通信中, 傳遞的資料是通過 data ( ) 來做驅動的, 這同樣也帶來了一個作用域的問題如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>slot 資料作用域</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return { text: '送出' }
},
template: `
<son>
<div>{{text}}</div>
</son>
<son>
<button>{{text}}</button>
</son>
`
})
app.component('son', {
data () {
return { text: '點選'}
},
methods: {
handleClick () {
alert(666)
}
},
template: `
<div>
<input />
<span @click="handleClick">
<slot>{{text}}</slot>
</span>
<div>{{text}}</div>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html> 父子元件都用到了 text 這個變量, 但其作用域是不同的, 我們可以看到在父元件這裡, text 用的是父元件的資料.
template: `
<son>
<div>{{text}}</div>
</son>
<son>
<button>{{text}}</button>
</son>
`
}) 而在子元件這裡, slot 裡面的 text 也是用父元件資料, 但 slot 外面的 text 則用的是子元件自己的資料.
template: `
<div>
<input />
<span @click="handleClick">
<slot>{{text}}</slot>
</span>
<div>{{text}}</div>
</div>
` 小結
最後來對本篇對 slot 的基本概念和使用做一個總結梳理如下:
- slot 的能實作父元件在調用子元件時, 直接往裡面寫内容 dom
- 子元件命名要小寫, 父元件在調的時候以雙标簽的方式往裡面添加 dom
- 子元件直接用 slot 這個雙标簽進行引用即可, 但其不能綁事件, 但可通過外包一層正常标簽即可
- 父模闆調用的資料屬性, 用的是父模闆資料屬性, 子模闆調用的資料屬性, 用的是子莫不資料屬性
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)