vue元件中插槽slot
阿新 • • 發佈：2018-11-21
父元件向子元件傳遞dom元素，標籤元素
<body> <div id="app"> <child> <p>11</p> <span>22</span> </child> </div> <script> var child = { template: `<div> <slot></slot> </div>`, } var vm = new Vue({ el: '#app', components: { child }, }) </script>
slot的作用就是： 子元件中的
=== 父元件中的
並且：子元件中還可以寫標籤的，注意在slot邏輯之前還是在邏輯之後
結果：
（3）如果父元件中沒有傳入標籤，那麼，slot標籤的innerText才會生效
父元件中有標籤元素，slot標籤中的內容不生效
父元件中的沒有標籤元素，slot標籤中的內容生效
（4）一個元件中多個插槽（具名插槽）
<div id="app"> <child> <div class="header" slot="header">header</div> <div class="footer" slot="footer">footer</div> </child> </div> <script> var child = { template: `<div> <slot name="header"></slot> <div class="cont">hello</div> <slot name="footer"></slot> </div>`, } var vm = new Vue({ el: '#app', components: { child }, }) </script>
結果：
注意：具名插槽也是有預設值的。在父元件沒有傳入該具名的標籤時，內容就由插槽的預設值決定
（5）作用域插槽
元件的複用程度更大的時候
<div id="app"> <child> <template slot-scope="items"> <li>{{items.item}}</li> </template> </child> </div> <script> var child = { data: function(){ return { list: [1,2,3,4] } }, template: `<div> <ul> <slot v-for="item of list" :item=item></slot> </ul> </div>`, } var vm = new Vue({ el: '#app', components: { child }, }) </script>
程式碼結構：
list的值傳入到子元件list中，item就是list的每一項，所有的item都傳入template標籤的items中，那麼就可以通過items.item獲取list中的每一項。注意template中的slot-scope是必寫的屬性。
這樣，父元件中li可以替換，那麼資料展示出來的形式就由父元件決定，比如：li標籤換為span標籤
結果：
