vue.js插槽

時間 2019-11-20

原文原文鏈接

具體講解的urlcss

https://github.com/cunzaizhuyi/vue-slot-demohtml

//例子vue

用jsfiddle.net去運行就好git

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue做用域插槽</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app2">
<my-stripe-list :items="users" odd-bgcolor="#D3DCE6" even-bgcolor="#E5E9F2">

<template slot="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>
</div>
<script>
Vue.component('my-stripe-list', {
/*slot的$index能夠傳遞到父組件中*/
template: `
<div>
<div v-for="(item, index) in items" style="line-height:2.2;" :style="index % 2 === 0 ? 'background:'+oddBgcolor : 'background:'+evenBgcolor">
<slot name="cont" :$index="index"></slot>
</div>
</div>
`,
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>github

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。