- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) > JavaScript >
- 關(guān)于VUE的編譯作用域及slot作用域插槽問(wèn)題
什么是插槽？插槽的指令為v-slot，它目前取代了slot和slot-scope，插槽內容，vue實(shí)例一套內容分發(fā)的api，將slot元素作為承載分發(fā)內容的出口。
插槽分為單個(gè)插槽，具名插槽，還有作用域插槽，前兩種比較簡(jiǎn)單這里就不贅述了，今天的重點(diǎn)是討論作用域插槽。
簡(jiǎn)單來(lái)說(shuō)，前兩種插槽的內容和樣式皆由父組件決定，也就是說(shuō)顯示什么內容和怎樣顯示都由父組件決定；
作用域插槽的樣式由父組件決定，內容卻由子組件控制。簡(jiǎn)單來(lái)說(shuō)：前兩種插槽不能綁定數據，作用域插槽是一個(gè)帶綁定數據的插槽。
下面給大家介紹VUE的編譯作用域及slot作用域插槽問(wèn)題，一起看看吧！
其實(shí)就是 如果有很多個(gè)組件 ，當你在組件 使用變量的時(shí)候 ，那么你變量的作用域其實(shí)就也是在他定義的代碼中找，如果沒(méi)找到，那么就報錯，【這個(gè)很基礎的 是人都看出的】
官方說(shuō)：父組件模板的所有東西都會(huì )在父級作用域內編譯；子 組件模板的所有東西都會(huì )在子級作用域內編譯。
下面例子完美說(shuō)明了：
作用域插槽是slot一個(gè)比較難理解的點(diǎn)這里需要細心理解：
我現在說(shuō)下軟件需求目標：
子組件中有一組數據：比如：pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']，我要他在子組件的插槽中 ，有的用列表顯示，有的用 - 鏈接、有的用 * 鏈接。
先看源代碼（未使用插槽，寫(xiě)死的，在這個(gè)代碼中改寫(xiě) 使用插槽作用域）：
源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>購物車(chē)</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- 未使用插槽 下面模板是寫(xiě)死的 -->
<template id="cpn">
<div>
<ul>
<li v-for=" item in pLanguages">{{item}}</li>
</ul>
</div>
</template>
<div id="app">
<cpn></cpn>
</div>
<script>
const app = new Vue({
el: "#app",
components: {
'cpn': {
template: "#cpn",
data() {
return {
pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
}
}
}
}
})
</script>
</body>
</html>
那么如果用插槽：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>購物車(chē)</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- 使用 了 插槽 且 下面設置了 插槽slot 默認值 -->
<template id="cpn">
<div>
<slot> <!-- 已改動(dòng) -->
<ul>
<li v-for=" item in pLanguages">{{item}}</li>
</ul>
</slot>
</div>
</template>
<div id="app">
<cpn></cpn> <!-- 使用默認值 列表的形式 -->
<cpn> <!-- 已改動(dòng) -->
<!-- 問(wèn)題就在這里 我想要以 - 鏈接的方式展現cpn組件中data中的數據，我無(wú)法獲取，
因為作用域，這里的作用域是Vue實(shí)例app的！ 只能獲取到Vue實(shí)例app的data！
所以 下面這句代碼是錯的?。?！ 所以怎么解決插槽代碼獲取子組件中的data呢？
-->
<span v-for="item in pLanguages">{{item + "-"}}</span>
</cpn>
</div>
<script>
const app = new Vue({
el: "#app",
components: {
'cpn': {
template: "#cpn",
data() {
return {
pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
}
}
}
}
})
</script>
</body>
</html>
代碼已經(jīng)在里面很詳細的說(shuō)明了，問(wèn)題也標注出來(lái)了，簡(jiǎn)而言之：
因為不在子組件的作用域，怎么解決插槽代碼獲取子組件中的data呢？
解決方案： 利用slot作用域插槽
到此這篇關(guān)于VUE 的 編譯作用域 以及 slot作用域插槽的文章就介紹到這了,更多相關(guān)vue作用域插槽內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。
Copyright ? 2009-2022 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 特網(wǎng)科技 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 百度云 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
