1、插槽可以干什么？
使用插槽可以动态的预留内容
2、插槽有哪些？
默认插槽、具名插槽、作用域插槽；
3、如何使用？
以下是关键代码
默认插槽： <slot></slot>
具名插槽：<slot name="xxx"></slot>
作用域插槽：<template slot-scope="slotProps">
4、 具名插槽的使用：
实现步骤：首先创建一个子组件 /views/demo/soltcomponent.vue 在父组件中根据这个路径导入进来import basecomponent from '@/views/demo/soltcomponent.vue';
在父注册组件： components: { basecomponent } 使用组件：<basecomponent> </basecomponent>;通过 slot="header" 为这个header的插槽 添加内容；
具名插槽的方式，使用第二种更加方便
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script>
export default {
data() {
return {
num:0
}
},
}
</script>
<template>
<div id="createCard">
<!-- 具名插槽第一中方式 这种标签的方式只能写一个元素 -->
<div style="float:left;border:10px; 200px;">
<basecomponent>
<h1 slot="header">标题内容</h1>
<p>内容一</p>
<p>内容二</p>
<p>内容三</p>
<h2 slot="footer">我是底部</h2>
</basecomponent>
</div>
<!-- 具名插槽第二中方式 可以写多个元素 -->
<div style="float:right;border:1px;300px;">
<p>具名插槽二</p>
<basecomponent>
<template slot="header">
<p>header1</p>
<p>header2</p>
</template>
<p>内容一</p>
<p>内容二</p>
<template slot="footer">
<p>footer1</p>
<p>footer2</p>
</template>
</basecomponent>
</div>
</div>
</template>
<script>
import basecomponent from '@/views/demo/soltcomponent.vue';
export default {
name: "actionCreate",
components: {
basecomponent,
},
data() {
return {
list:[{
id:1,
name:'苹果'
},{
id:2,
name:'橙子'
},{
id:3,
name:'香蕉'
}
],
test: true,
message:'自定义组件显示',
context:'这是很长很长一段话',
number:0,
};
},
methods:{
createTable(){
},
clickMy(numbers){
this.number+=numbers;
//alert(this.number++);
}
}
};
</script>
<style>
.current{
color: aquamarine;
}
</style>
5、作用域插槽
<template>
<div>
<li :key="item.id" v-for="item in list">
<slot :info="item">{{item.name}}</slot>
</li>
</div>
</template>
<script>
export default {
props:['list'],
data() {
return {
}
}
}
</script>
<template>
<div>
<!-- 作用域插槽 slot-scope获取子组件的内容-->
<soltScope :list="list">
<template slot-scope="slotProps">
<strong v-if="slotProps.info.id==2" class="current">{{slotProps.info.name}}</strong>
<span v-else>{{slotProps.info.name}}</span>
</template>
</soltScope>
</div>
</template>
<script>
import soltScope from '@/views/demo/soltScope.vue';
export default {
name: "actionCreate",
components: {
soltScope,
},
data() {
return {
list:[{
id:1,
name:'苹果'
},{
id:2,
name:'橙子'
},{
id:3,
name:'香蕉'
}
],
test: true,
message:'自定义组件显示',
context:'这是很长很长一段话',
number:0,
};
},
methods:{
createTable(){
},
clickMy(numbers){
this.number+=numbers;
//alert(this.number++);
}
}
};
</script>
<style>
.current{
color: aquamarine;
}
</style>