在vue中使用插槽
2018-07-12 本文已影响0人
程序员同行者
slot 插槽
<!DOCTYPE html>
<html>
<head>
<title>在vue中使用插槽</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- // 父组件给子组件插入额外的dom区块 -->
<!-- // 这里定义了2个具名插槽 一个叫header一个叫footer -->
<div id='app'>
<counter>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</counter>
</div>
<!-- // 作用域插槽 -->
<!-- // 作用域插槽必须是一个template开头和结尾的，同时要声明从子组件传来的数据放在哪，slot-scope='props'这个指定。还有接收过来的数据改如何展示 -->
<div id='app-1'>
<child>
<template slot-scope='props'>
<li>{{props.item}} -- hello</li>
</template>
</child>
</div>
<script>
var counter = {
template: `<div >
<slot name="header"></slot>
<div class="content">content</div>
<slot name="footer"></slot>
</div>`,
}
var vm = new Vue({
el:'#app',
components: {
counter: counter
},
})
var child = {
data: function() {
return {
list: [1,2,3,4,5]
}
},
template: `<div>
<ul>
<slot v-for="item of list"
:item="item">
</slot>
</ul>
</div>`
}
var vm1 = new Vue({
el:'#app-1',
components: {
child: child
}
})
</script>
</body>
</html>
