不希望显示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变量
382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
