Vue 元件化開發之插槽
插槽的作用
相信看過前一篇元件化開發後，你對元件化開發有了新的認識。
插槽是幹什麼的呢？它其實是配合元件一起使用的，讓一個元件能夠更加的靈活多變，如下圖所示，你可以將元件當作一塊電腦主機板，將插槽當作主機板上的插槽，你可以隨意的更換該主機板上的零件。
常見的應用場景，如淘寶的導航條：
其實他們大體框架都是一樣的，只是內容不同罷了。我們就可以將這個導航條定義為一個元件，而內容不同的地方都定義為一個插槽，到了不同的場景更換不同插槽即可。
匿名插槽
使用<slot>定義插槽，當父元件模板中引用子元件時，可向該插槽插入內容，如下所示：
- 一個元件中最多隻能擁有一個匿名插槽，它其實也叫預設插槽
- 每個插槽都可以有預設值
<body> <div id="app"> <navigation> <span>這是導航</span> </navigation> </div> <template id="navigation"> <main> <slot>沒有內容時顯示我</slot> </main> </template> <script src="./vue.js"></script> <script> Vue.component("navigation", { template: "#navigation", }) const app = new Vue({ el: "#app", }) </script> </body>
具名插槽
實際開發中使用最多的還是具名插槽，給每個<slot>新增一個name屬性。
在插入內容時，指定slot屬性為<slot>的name屬性進行一一插入即可。
如下所示，定義了三種不同的搜尋框，都是用的同一個元件：
<style> @font-face { font-family: 'iconfont'; /* project id 1953712 */ src: url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.eot'); src: url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.woff2') format('woff2'), url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.woff') format('woff'), url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.ttf') format('truetype'), url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.svg#iconfont') format('svg'); } .iconfont { font-family: "iconfont"; font-size: 16px; font-style: normal; } i { flex-grow: 2; text-align: center; } * { padding: 0; margin: 0; box-sizing: border-box; } nav { width: 100%; background-color: rgba(255, 162, 109, 0.8); padding: 10px; margin-bottom: 20px; } .navigation { display: inline-flex; justify-content: space-around; align-items: center; width: 100%; } input { flex-grow: 6; border-radius: 3rem; text-align: center; outline: none; } </style> <body> <div id="app"> <!-- 第一個個導航條，中間用預設的input框 --> <nav> <navigation class="navigation"> <!-- 插入時，指定slot屬性 --> <i class="iconfont" slot="left" :style="{fontSize:'2rem'}"></i> <i class="iconfont" slot="right" :style="{fontSize:'2rem'}"></i> </navigation> </nav> <!-- 第二個導航條，不需要預設的input框，所以用div填充 --> <nav style="background-color: aliceblue"> <navigation class="navigation"> <i class="iconfont" slot="left" :style="{fontSize:'2rem'}"></i> <div slot="mid" style="width: 70%;text-align: center">雙十一狂歡夜</div> <i class="iconfont" slot="right" :style="{fontSize:'2rem'}"></i> </navigation> </nav> <!-- 第三個導航條，不需要預設的input框，所以用div填充 --> <nav style="background-color: #ffaad8"> <navigation class="navigation"> <i class="iconfont" slot="left" :style="{fontSize:'2rem'}"></i> <div slot="mid" style="width: 70%;text-align: center">我的資料</div> <i class="iconfont" slot="right" :style="{fontSize:'2rem'}"></i> </navigation> </nav> </div> <template id="navigation"> <main> <!-- 給插槽取名 name屬性--> <slot name="left"></slot> <slot name="mid"><input type="text" placeholder="輸入你的搜尋項" :style="{height:'2rem'}"></slot> <slot name="right"></slot> </main> </template> <script src="./vue.js"></script> <script> Vue.component("navigation", { template: "#navigation", }) const app = new Vue({ el: "#app", }) </script> </body>
編譯作用域
編譯作用域的意思是，在那個元件的模板中，渲染時的資料就查詢那個元件。
如下所示，父元件和子元件都有一個變數show，同時子元件中擁有一個插槽，將插槽插入子元件時用了v-show指令，那麼這個被插入的元素會去找子元件的show還是找父元件的show呢？
答案是父元件，因為插入插槽的元素是書寫在父元件中的。
<body>
<div id="app">
<cpn>
<span slot="cpn-slot" v-show="show">引用父元件的show</span>
</cpn>
</div>
<!-- 子元件模板 -->
<template id="cpn-template">
<div>
<span v-show="show">引用子元件的show</span>
<slot name="cpn-slot"></slot>
</div>
</template>
<script src="./vue.js"></script>
<script>
var cpn = {
template: "#cpn-template",
data() {
return {
show: false,
}
}
}
const app = new Vue({
el: "#app",
data: {
show: true,
},
components: { // Vue例項內部進行註冊
cpn,
},
})
</script>
</body>
作用域插槽
作用域插槽使用較少，它核心理念就是用父元件來渲染子元件。
如下程式碼中出現一個問題，我們如果直接進行渲染，就把程式碼寫死了，要想改變樣式那麼所有引用該子元件的地方樣式都會改變：
<body>
<div id="app">
<cpn :user-msg="msg"></cpn>
</div>
<!-- 子元件模板 -->
<template id="cpn-template">
<div>
<ul>
<li v-for="row in userMsg">{{row}}</li>
</ul>
</div>
</template>
<script src="./vue.js"></script>
<script>
var cpn = {
template: "#cpn-template",
props: ["userMsg",],
}
const app = new Vue({
el: "#app",
data: {
msg: {
id: 1,
name: "yunya",
age: 18,
}
},
components: {
cpn,
}
})
</script>
</body>
此時就可以使用作用域插槽，由父元件來渲染子元件。
使用作用域插槽遵循三個點：
1.必須使用DOM不識別的標籤，如template進行接收子元件插槽屬性
2.接收子元件插槽屬性的屬性是scope
3.scope是一個物件
以下是渲染結果，由父元件渲染子元件，給他加粗：
<body>
<div id="app">
<cpn :user-msg="msg">
<template slot="message" scope="v">
<ul>
<li><b>{{v.field}}</b></li>
</ul>
</template>
</cpn>
</div>
<!-- 子元件模板 -->
<template id="cpn-template">
<div>
<slot name="message" v-for="row in userMsg" :field="row"></slot>
</div>
</template>
<script src="./vue.js"></script>
<script>
var cpn = {
template: "#cpn-template",
props: ["userMsg",],
}
const app = new Vue({
el: "#app",
data: {
msg: {
id: 1,
name: "yunya",
age: 18,
}
},
components: {
cpn,
}
})
</script>
</body>
再配一張圖吧，看看每次的v是長什麼樣子：
相關推薦
Vue 元件化開發之插槽
插槽的作用 相信看過前一篇元件化開發後，你對元件化開發有了新的認識。 插槽是幹什麼的呢？它其實是配合元件一起使用的，讓一個元件能夠更加的靈活多變，如下圖所示，你可以將元件當作一塊電腦主機板，將插槽當作主機板上的插槽，你可以隨意的更換該主機板上的零件。 常見的應用場景，如淘寶的導航條：
vue元件化開發（底部導航蘭）
父子元件關鍵聯絡 一.建立父元件parent.vue <template> <div> <h1>父元件的內容</h1> </div> </template> 然後再router 下的ind
元件化開發之私有庫製作以及常見問題
前言：這篇文章主要描述私有庫的製作過程以及本人在使用過程中的一些問題和解決方案，提到元件化就不得不想到pods私有庫相關的東西(當然元件化不侷限於結合私有庫使用，還可以做成靜態庫或者多target開發等方式，這裡只講解私有庫相關的東西，稍後會出一篇元件化結合私有庫實現元件化開發的方式) 私有
iOS元件化開發之——使用Cocoapods打私有的Pod庫
隨著專案和業務的發展，專案中會有很多基礎功能模組和通用業務模組可以抽象出來獨立成元件，這樣可以為我們以後在開發新專案的時候提供共用基礎元件，進行元件化程式設計，不需要重新造輪子，提高開發效率。因此我們就需要一個方案來合理的管理公共的元件。 Spec Repo(配置倉庫)
Vue元件化開發（第四天（2.元件））
Vue 元件化開發 為了好維護管理和程式碼的複用，提高開發效率便於協同開發 分類 頁面級元件： 一個頁面是一個元件 將可複用的部分抽離出來 一個自定義標籤Vue就會把他看成一個嘴賤 div p span a header …可以給這些標籤賦予一定的意義
元件化開發之04 如何將一些靜態庫打包成動態庫
筆者打造出來了5個基礎元件,滿懷信心準備大幹一場時候,發現業務元件用到支付寶 , 微信支付 SDK ,微博 SDK ,高德地圖 SDK 等靜態庫. a ,.framework 檔案時候,連結到元件時候報錯誤,而且還不容易解決,因為我整個工程都是 use_fram
元件化開發之利用SVN搭建私有SpecRepo
隨著公司業務發展，app數量增加，貼上複製重複造輪子的開發方式已經不能滿足多個app快速迭代的需求了，於是就元件化開發就應運而生了，關於什麼是元件化開發以及元件化開發的好處，這裡不再贅述，需要了解的同學移步這裡傳送門。本文只講述元件化開發關鍵技術—使用cocoa
元件化開發之路由器模組詳解（ActivityRouter原始碼詳解）
路由器的作用是什麼？通俗的講，路由器的作用就是一根網線滿足多人上網的需求。而在開發中路由器模組的作用就是實現中轉分發，也就是說將原來有關係的模組（有依賴的模組分開），產生一箇中間的模組，讓原來依賴的兩個模組都去和路由模組互動，從而將原來兩個有關係的模組拆分開，利如我現
Vue元件化開發
Vue的元件化 元件化是Vue的精髓，Vue就是由一個一個的元件構成的。Vue的元件化設計到的內容又非常多，當在面試時，被問到：談一下你對Vue元件化的理解。這時候又有可能無從下手，因此在這裡闡釋一下個人對Vue的元件化的理解。 元件的分類 一般來說，元件大致可以分為三類： 頁面級別的元件。 業務上可複
day69:Vue:元件化開發&Vue-Router&Vue-client
目錄 元件化開發 1.什麼是元件？ 2.區域性元件 3.全域性元件 4.父元件向子元件傳值 5.子元件往父元件傳值 6.平行元件傳值 Vue-Router的使用 Vue自動化工具:Vue-Client 元件化開發 1.什麼是元件？ 1.元件（Component）是自定義封裝的功能。在前
Vue 元件化開發
元件化開發 基本概念 在最開始的時候，已經大概的聊了聊Vue是單頁面開發，使用者總是在一個頁面上進行操作，看到的不同內容也是由不同元件構成的。 通過使用者的操作，Vue將會向用戶展示某些元件，也會隱藏某些元件。 一個Vue的專案就是一個Vue的例項物件。而使用者看到的頁面則是Vue.com
Vue.js（17）之 插槽
單個插槽（匿名插槽） 定義插槽：在子元件作用域中，使用 <slot></slot> 定義一個插槽； 使用插槽：在父作用域中使用帶有插槽的元件時，元件內容區域中的內容，會插入到插槽中顯示； 注意：在一個元件的定義中，只允許出現一次
前端成長必經之路之元件化思維與技巧 Web元件化開發
1-1課程導學.mp42-1環境及知識準備.mp43-1 技術選型分析.mp43-2 工程構建安裝.mp44-1 css模組化設計.mp44-2 css模組化設計（程式碼）.mp44-3 js元件化及自適應mp4.mp44-4 spa設計.mp44-5 構建工具及上線指導.mp45-1 首頁-抽象元
Vue元件化(槽口傳參)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script s
筆記之元件化開發和元件管理工具composer
（1）元件化開發 一個元件可以釋出供別人使用，也可以使用別人釋出的元件快速構建專案，更換元件而不需修改系統其他部分的程式碼。 laravel底層使用了很多symfony框架的元件。 （2）如何實現元件化開發 composer，元件管理工具 （3）composer compos
vue.js元件化開發
Vue.extend() 元件化開發是Vue.js非常重要的一個特性，我們可以將一個頁面視作一個大的根元件，裡面所包含的元素就是不同的子元件，子元件可以在不同的根元件裡被呼叫。我們通常會在一個頁面中宣告一個Vue例項new Vue({})作為跟元件，生成能被反覆使用的子元件
vue學習（二）：元件化開發
首先看看vuedemo的入口函式main.js// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.
Vue.js的元件化開發
元件化開發 什麼是元件？ web中的元件其實就是頁面組成的一部分， 好比是電腦中的每一個元件（如硬碟、鍵盤、滑鼠）， 它是一個具有獨立的邏輯和功能或介面， 同時又能根據規定的介面規則進
iOS之旅--釋出自己的CocoaPods庫(元件化開發第一步)
從去年的Dev大會上就開始慢慢接觸瞭解元件化，但是沒有實際的專案可以操作，擱淺至今，中間也嘗試性的試驗過，現在來一個總結。 1、思考 抽取專案中獨立的程式碼，作為模組與整體專案分開。首先我能想到的網路庫、工具類、封裝好的一些控制元件，涉及業務的由於業務有
React Native 之 元件化開發
前言 學習本系列內容需要具備一定 HTML 開發基礎，沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習 本人接觸 React Native 時間並不是特別長，所以對其中的內容和性質瞭解可能會有所偏差，在學習中如果有錯會及時修改內容，也歡迎萬能的朋友們批