Vue插槽slot理解與初體驗 ~
阿新 • • 發佈:2021-10-06
Vue插槽
一、插槽的理解
官網介紹
Vue 實現了一套內容分發的 API,將 <slot>
元素作為承載分發內容的出口。
為什麼使用插槽
Vue 中有一個重要的概念-元件,可以在開發中將子元件插入到父元件中,因此需要給子元件元件留出位置(這裡的元件我的理解是可以理解成sql的一個佔位符.),如圖slot提供可以插入的位置,我們將component1和component2插入到big component中。
二、使用步驟
1.希望最終得到的頁面
<div id="app"> <div> <h3>圖書列表</h3> <ul> <li>紅樓夢</li> </ul> </div> </div>
可以將該頁面分為三部分來看,將這三部分註冊成vue的元件
2.元件註冊
<div id="app"> <book-component></book-component> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script> <script> //圖書元件 Vue.component('book-component',{ template: '<div><h3>圖書列表</h3><ul><li>紅樓夢</li></ul></div>' }); //圖書標題元件 Vue.component('book-component-title',{ template: '<h3>圖書列表</h3>' }); //圖書列表元件 Vue.component('book-component-list',{ template: '<li>紅樓夢</li>' }); let vApp = new Vue({ el: '#app' }); </script>
直接引入註冊的元件就能實現列表展示,下面需要把子元件插入到父元件中
3.新增插槽
<div id="app"> <book-component> <book-component-title slot="title"></book-component-title> <book-component-list slot="list"></book-component-list> </book-component> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script> <script> //圖書元件 Vue.component('book-component',{ //<div> // <slot name="title"></slot> // <slot name="list"></slot> //</div> template: '<div><slot name=\'title\'></slot><ul><slot name=\'list\'></slot></ul></div>' }); //圖書標題元件 Vue.component('book-component-title',{ template: '<h3>圖書列表</h3>' }); //圖書列表元件 Vue.component('book-component-list',{ template: '<li>紅樓夢</li>' }); let vApp = new Vue({ el: '#app' }); </script>
在父元件中加入slot="",父元件slot中name可以隨意指定;在子元件中加入<slot>
標籤,標籤的name必須和父元件對應
vue3.0後,v-slot:插槽名 取代了
slot="插槽名"的寫法 可參考:https://www.cnblogs.com/LUA123/p/10812164.html
3.繫結資料並傳遞
<div id="app">
<book-component>
<book-component-title slot="title" v-bind:ti="title"></book-component-title>
<book-component-list slot="list" v-for="li in list" v-bind:l="li"></book-component-list>
</book-component>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script>
//圖書元件
Vue.component('book-component',{
template: '<div><slot name=\'title\'></slot><ul><slot name=\'list\'></slot></ul></div>'
});
//圖書標題元件
Vue.component('book-component-title',{
props: ['ti'],
template: '<h3>{{ti}}</h3>'
});
//圖書列表元件
Vue.component('book-component-list',{
props: ['l'],
template: '<li>{{l}}</li>'
});
let vApp = new Vue({
el: '#app'
,data: {
title: '圖書列表'
,list: [
'紅樓夢','三國演義','水滸傳','西遊記'
]
}
});
</script>
通過'props'接收引數,引數對應關係不要記錯就行。
繫結資料之後最終頁面