這篇文章為大家帶來了關於vue的相關知識，其中主要介紹了增加組件擴展性的slot的相關問題，組件的插槽也是為了讓我們封裝的組件更加具有擴充性，讓使用者可以決定元件內部的一些內容到底展示什麼，下面一起來看一下，希望對大家有幫助。
【相關推薦：javascript影片教學、vue.js教學】
#元件的插槽也是為了讓我們封裝的元件更有擴展性。
讓使用者可以決定元件內部的一些內容到底要展示什麼。
它們也很多區別，但也有很多共性。
如果，我們每一個單獨去封裝一個元件，顯然不合適：例如每個頁面都返回，這部分內容我們就要重複去封裝。
但是，如果我們封裝成一個，好像也不合理：有些左側是選單，有些是返回，有些中間是搜索，有些是文字，等等。
抽取共通性，保留不同。
最好的封裝方式就是將共性抽取到元件中，將不同曝光為插槽。
一旦我們預留了插槽，就可以讓使用者根據自己的需求，決定插槽中插入什麼內容。
是搜尋框，還是文字，還是選單。由調用者自己決定。
透過一個簡單的例子，來為子元件定義一個插槽：<slot></slot>中的內容表示，如果沒有在該元件中插入任何其他內容，就預設顯示該內容
nbsp;html>
<meta>
<meta>
<title>Document</title>
<script></script>
<div>
<cpn><button>按钮</button></cpn>
<cpn><span>aaaaa</span></cpn>
</div>
<template>
<div>
<h2>我是子组件</h2>
<h3>hahaha</h3>
<slot></slot>
</div>
</template>
<script>
let app = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn',
}
}
})
</script>
當子元件的功能複雜時，子元件的插槽可能並非是一個。
例如我們封裝一個導覽列的子元件，可能就需要三個插槽，分別代表左邊、中間、右邊。那麼，外面在插入內容給插槽時，如何區分插入的是哪一個呢？
如何使用具名插槽呢？
<slot name="myslot"></slot>nbsp;html>
<meta>
<meta>
<title>Document</title>
<script></script>
<div>
<cpn><button>按钮1</button></cpn>
<cpn><span>aaaaa</span>
<button>按钮2</button></cpn>
</div>
<template>
<div>
<h2>我是子组件</h2>
<h3>hahaha</h3>
<slot></slot><br>
<slot></slot>
</div>
</template>
<script>
let app = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn',
}
}
})
</script>
#父元件取代插槽的標籤，但是內容由子元件來提供。
子元件中包含一組數據，例如：pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C ']
需要在多個介面進行展示：
內容在子元件，希望在父元件中展示：
在父元件使用我們的子元件時，從子元件中拿到資料：
<template slot-scope="slotProps"></template>取得到slotProps屬性slotProps.data就可以取得到剛才我們傳入的data了<div>
<cpn></cpn>
<cpn>
<template>
<span>{{slot.data.join('-')}}</span>
</template>
</cpn>
<cpn>
<template>
<span>{{slot.data.join('*')}}</span>
</template>
</cpn>
</div><template>
<div>
<slot>
<ul>
<li>{{item}}</li>
</ul>
</slot>
</div>
</template> 
nbsp;html>Document <script></script> <div> <cpn></cpn> <cpn> <template> <span>{{slot.data.join('-')}}</span> </template> </cpn> <cpn> <template> <span>{{slot.data.join('*')}}</span> </template> </cpn> </div> <template> <div> <slot> <ul> <li>{{item}}</li> </ul> </slot> </div> </template> <script> let app = new Vue({ el: '#app', components: { cpn: { template: '#cpn', data() { return { pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++'], } } } } }) </script>
【相關推薦：javascript影片教學、vue.js教學】
以上是Vue詳解之增加組件擴展性的slot的詳細內容。更多資訊請關注PHP中文網其他相關文章！
