這次帶給大家Vue作用域插槽使用詳解，Vue作用域插槽使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
舉個例子，例如我寫了一個可以實現條紋相間的清單群組件，發布後，使用者可以自訂每一行的內容或樣式（普通的slot就可以完成這個工作）。而作用域插槽的關鍵之處就在於，父元件能接收來自子元件的slot傳遞過來的參數，具體看案例和註解。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vue作用域插槽</title>
<scriptsrc="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<pid="app2">
<my-stripe-list:items="users"odd-bgcolor="#D3DCE6"even-bgcolor="#E5E9F2">
<!-- props对象接收来自子组件slot的$index参数 -->
<templateslot="cont"scope="props">
<span>{{users[props.$index].id}}</span>
<span>{{users[props.$index].name}}</span>
<span>{{users[props.$index].age}}</span>
<!-- 这里可以自定[编辑][删除]按钮的链接和样式 -->
<a:href="'#edit/id/'+users[props.$index].id"rel="external nofollow">编辑</a>
<a:href="'#del/id/'+users[props.$index].id"rel="external nofollow">删除</a>
</template>
</my-stripe-list>
</p>
<script>
Vue.component('my-stripe-list', {
/*slot的$index可以传递到父组件中*/
template: `
<p>
<pv-for="(item, index) in items"style="line-height:2.2;":style="index % 2 === 0 ? 'background:'+oddBgcolor : 'background:'+evenBgcolor">
<slotname="cont":$index="index"></slot>
</p>
</p>
`,
props: {
items: Array,
oddBgcolor: String,
evenBgcolor: String
}
});
new Vue({
el: '#app2',
data: {
users: [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 22},
{id: 3, name: '王五', age: 27},
{id: 4, name: '张龙', age: 27},
{id: 5, name: '赵虎', age: 27}
]
}
});
</script>
</body>
</html>我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是Vue作用域插槽使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
