vue。js插槽

依米_發表於2018-05-18
VueJS

不希望顯示2遍就要在

1.在插槽裡定義 slot="header"
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
2.在slot裡新增name='header'
<slot name="header"></slot>
<div class='content'>content</div>
<slot name='footer'></slot>


子元件需要在外面引入2個插入的內容，一部分的內容叫做header一部分的內容叫做footer,
而父元件呼叫子元件的裡剛好有slot=header的插槽。




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue插槽（slot)</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<boy-content><!--//content是保留字，不可以定義為元件-->
<div class="header" slot="header">header</div><!--//插槽-->
<div class="footer" slot="footer">footer</div>
</boy-content>
</div>
<script>
Vue.component('boy-content',{

//es6的語法
// 上一個slot外掛顯示頭部區域
// 下一個slot外掛顯示低部區域
//header和footer都是slot插槽裡的內容，所以會顯示2便
template:`<div> 



<slot name="header"></slot>
<div class='content'>content</div>

<slot name='footer'></slot>
   </div>`
})


var vm = new Vue({
el:"#app",

})
如果在父元件裡沒有引入slot=header 的插槽,需要
</script>
</body>
</html>














template:`<div>
<ul>
<slot v-for="item in list" :item=item></slot>
</ul>
</div>`

1.這段程式碼的意思是這段程式碼做一個列表迴圈，列表項中的每一項我不關心，具體怎麼顯示有外部元件告訴我怎麼顯示




<template slot-scope="props">
<h1>{{props.item}}</h1>
</template>
2.從子元件傳遞slot,首先在父元件裡要進行 作用域插槽必須是以template元件開頭結尾定義，props這個屬性值可以自己定義，當子元件呼叫slot的時候，要傳遞一個item資料。


<slot v-for="item in list" :item=item></slot>是傳遞一個item變數

相關文章