整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
讀本文約需要10分鐘，您可以先關注我們，避免下次無法找到。
本篇文章成哥繼續帶大家來學習前端VUE教程，今天主要講解VUE的插槽等相關知識點。下面我們就一起來學習該塊內容吧！
插槽就是子組件中的提供給父組件使用的一個占位標識符，用<slot></slot> 表示（），父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內容會替換子組件的<slot></slot>標簽，下面我們來看看具體示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基礎教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--調用子組件-->
<Child>
<p style="color: red">插槽示例(本內容將會渲染至子組件slot位置處)</p>
</Child>
</div>
<script>
// 定義一個子組件Child，同時在其html內部增加<slot></slot>進行占位
var Child = {
data: function () {
return {
}
},
/*父組件在調用子組件時會把其在子組件標簽的內容渲染進slot占位處*/
template: '<h4>我是子組件<slot></slot></h4>',
}
var vm = new Vue({
el: '#app', // dom的掛載點,這邊將dom掛載到id為app的標簽上
// 在 components 選項中定義你想要使用的組件
components: {
"Child": Child,
},
data: { // 數據對象
},
})
</script>
</body>
</html>
這時肯定有人疑惑如果我子組件中沒有slot標簽然后再父組件中調用子組件時也在期內寫上內容會不會被渲染了，我們來看一下演示：現在可以得出一個結論如果子組件中沒有<slot></slot>標簽，則父組件調用子組件時內插入的所有內容都會被丟棄，不會被渲染出來
如上面的列子中如果我們想在插槽中使用數據時,會發現插槽中的數據是由父組件的data控制的而不是子組件進行控制，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基礎教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--由于編譯作用域所以這邊的v-show與msg其實都是父組件傳遞的值,因為這些內容都是父組件編譯的-->
<Child v-show="isShow">
<p style="color: red">插槽編譯作用域示例： {{msg}}</p>
</Child>
</div>
<script>
var Child = {
data: function () {
return {
msg: "我是子組件msg的值"
}
},
// 子組件定義的msg變量值不會渲染到插槽內
template: '<h4>我是子組件<slot></slot></h4>',
}
var vm = new Vue({
el: '#app', // dom的掛載點,這邊將dom掛載到id為app的標簽上
// 在 components 選項中定義你想要使用的組件
components: {
"Child": Child,
},
data: { // 數據對象
isShow: true,
msg: "我是父組件msg的值"
},
})
</script>
</body>
</html> 編譯作用域其實就是一條規則就是，父級模板里的所有內容都是在父級作用域中編譯的；子模板里的所有內容都是在子作用域中編譯的。
有時為一個插槽設置具體的后備 (也就是默認的) 內容是很有用的，它只會在沒有提供內容的時候被渲染。例如在一個 <submit-button> 組件中
<button type="submit">
<slot></slot>
</button> 我們可能希望這個 <button> 內絕大多數情況下都渲染文本“Submit”。為了將“Submit”作為后備內容，我們可以將它放在 <slot> 標簽內：
<button type="submit">
<slot>Submit</slot>
</button> 現在當我在一個父級組件中使用 <submit-button> 并且不提供任何插槽內容時：
<submit-button></submit-button> 后備內容“Submit”將會被渲染：
<button type="submit">
Submit
</button> 但是如果我們提供內容：
<submit-button>
Save
</submit-button> 則這個提供的內容將會被渲染從而取代后備內容：
<button type="submit">
Save
</button> 具名插槽就是給插槽指定名稱我們在使用時通過名稱來指定其渲染的位置，具體示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基礎教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--具名插槽示例-->
<Child>
<!--按照插槽名稱進行標簽傳遞渲染，具體渲染順序是根據子組件中編寫插槽的順序來的-->
<template v-slot:header>
<div>我是header</div>
</template>
<template v-slot:footer>
<div>我是footer</div>
</template>
<!--如果不指定插槽名稱標簽會被渲染至默認插槽處，也就是沒有定義名稱的插槽位置-->
<template>
<div>我會被渲染至默認插槽位置</div>
</template>
</Child>
</div>
<script>
var Child = {
data: function () {
return {
msg: "我是子組件msg的值"
}
},
// 定義具名插槽，沒有定義名稱的slot會有一個默認值為default,在父組件調用時沒有指定渲染插槽名稱的標簽會被渲染至默認插槽位置
template: '<div><h4>我是子組件</h4><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>',
}
var vm = new Vue({
el: '#app', // dom的掛載點,這邊將dom掛載到id為app的標簽上
// 在 components 選項中定義你想要使用的組件
components: {
"Child": Child,
},
data: { // 數據對象
},
})
</script>
</body>
</html> 作用域插槽就是讓父組件的插槽內容插能夠訪問子組件中才有的數據，具體使用示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基礎教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--作用域插槽示例-->
<Child>
<!--這邊v-slot后面其實省略了default名稱詳細寫法v-slot:default="slotProps"-->
<template v-slot="slotProps">
<!--通過slotProps獲取子組件中給slot v-bind的值，然后進行遍歷讀取-->
<div v-for="item in slotProps.user">姓名: {{ item.name }} 得分: {{ item.score }}</div>
</template>
</Child>
</div>
<script>
var Child = {
data: function () {
return {
userList: [
{"name": "小明", "score": "90"},
{"name": "小紅", "score": "95"},
{"name": "小強", "score": "96"}
]
}
},
// 定義作用域插槽，給slot v-bind了一個userList的值
template: '<div><h4>作用域插槽示例</h4><slot :user="userList"></slot></div>',
}
var vm = new Vue({
el: '#app', // dom的掛載點,這邊將dom掛載到id為app的標簽上
// 在 components 選項中定義你想要使用的組件
components: {
"Child": Child,
},
data: { // 數據對象
},
})
</script>
</body>
</html> 至此我們VUE基礎教程就就講完了，主要講解了VUE的基礎用法，其實VUE還有一些進階知識如vue-router（前端路由）、vuex（數據狀態管理）等內容，但這些內容主要用在項目構建上，成哥在下面AntDesign vue教程中會進行穿插講解，敬請期待。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！
-END-
@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。
相關閱讀：
預編譯發生在函數作用域創建的階段在函數執行之前。
函數、形參、變量的優先級別：
函數 > 形參 > 變量
全局作用域預編譯
函數作用域預編譯
function fn(a){
console.log(a,1); // ? a () {} 1
var a=2222;
console.log(a,2); // 2222 2
function a () {}
console.log(a,3); // 2222 3
}
fn(1,2)function fn(a, c) {
console.log(a);
var a=123;
console.log(a);
console.log(c);
function a() { }
if (false) {
var d=678
}
console.log(d);
console.log(b);
var b=function () { }
console.log(b);
function c() { }
console.log(c);
}
fn(1, 2)第一階段：創建 AO 對象，查找函數形參以及函數內部的變量聲明,實參和形參相統一，如果沒有傳遞實參，那么值為 undefined
AO : {
a : undefined -> 1
c : undefined -> 2
b : undefined
d : undefined
}第二階段：查找函數聲明
AO : {
a : undefined -> 1 -> function a() { }
c : undefined -> 2 -> function c() { }
b : undefined -> function () { }
d : undefined
}執行代碼
全棧攻城獅-每日更新原創IT編程技術及日常實用視頻。
主要內容：正式引入HTML網頁開發，學習并了解HTML的相關知識。變身Web開發達人，做全棧程序員。這是以第一課，希望以我的方式，你將學會HTML這門課程。
今天的話，主要講解一下HTML相關知識，同樣在接下來的一段時間的安排中，也以HTML為主。崇尚全棧，也就意味著我們，需要學習主流的技術知識。在前一段時間內，主要講解了.Net的只是教程。當然.NET并沒有完畢。
C#語言
只是在這里把HTML穿插進來，一則鞏固自己所得，二來學習一下這門非常簡單的HTML技術。學習完畢HTML之后則會，繼續進行基礎加強、數據庫、MVC等教程的協作工作。
PDF文檔
同時在前一個階段內，講解的并不是很好，在這個HTML階段內，則會吸取教訓，爭取寫出更符合初學者學習的技術教程。當然前面的課程也會不斷的修正，最后我會生成PDF的文檔，發給大家。
HTML概述
HTML，超文本標記語言，超文本就意味著有多于文字的形式，比如包含超鏈接、圖片、視頻、動畫等形式。HTML是應用在網站網頁展現的一種語法結構。我們在使用瀏覽器瀏覽網頁的時候，看到的界面都是由HTML代碼表現出來的。HMTL可以說是一種展示文字圖片視頻等元素的一種方式。通過特定的標記就能展示出來自己想要的效果。如何展現？就讓我一步步教你。
物聯網
互聯網的飛速發展，導致了形形色色的網站應用被創建。云計算、物聯網仿佛唾手可得。把諸多應用建立在云上，通過這種瀏覽器與用戶交互的形式讓人們使用。這些所有網絡應用，只要是通過瀏覽器進行使用的情況，都是需要HTML技術。當然HTML作為基礎之用。這就要求我們程序員，必須學習并熟悉HTML語言。能在這個基礎上進行Web的開發。
HTML是解釋性語言，不需編譯，直接書寫之后，就可以運行。
HTML是純文本類型的語言，你完全可以通過記事本程序進行創建書寫。
雖然HTML可以通過記事本來創建寫代碼，但是并不推薦，因為以前學習過.Net，所以依舊使用Visual Studio。VS也是前端的開發神器。
自己寫的HTML代碼，在不同的瀏覽器內，可能會有不同的展示效果。這是由瀏覽器的渲染引擎決定的。
HTML具有平臺無關性，在任何平臺只要擁有一款瀏覽器，你就可以打開HTML網頁。
HTML代碼運行在瀏覽器中，也就是需要使用瀏覽器進行測試。
HTML
今天就先說一下HTML的基本知識，電腦編程系列教程，下節繼續。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
