基本使用
1、插槽不添加任何内容,只占用位置,使用时添加
2、插槽做有内容,当使用插槽时,会被覆盖
3、插槽中有多个插槽,一并添加使用
4、具名插槽(根据插槽名字进行替换)
<html>
<header>
<title>Title</title>
</header>
<body>
<div id="app">
<cnp>
<h1 slot="p">按钮</h1>
</cnp>
</div>
<template id="cnp">
<div>
<h2>这是一个组件</h2>
<slot name="p"><p>p标签</p></slot>
<slot name="name"><span>span标签</span></slot>
<slot name="button"><p>子组件按钮</p></slot>
</div>
</template>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: "Kone",
lastName: "Bula"
},
components: {
cnp: {
template: "#cnp",
}
}
})
</script>
</body>
</html>
编译作用域
在模版中调用的时候,使用模版下的参数(vue实例下的参数或者父模版下参数),当使用在组件里时,使用的是组件下的参数。
作用域插槽
作用:父组件调用子组件,但是对子组件展示的方式不满意,要进行自定义,但是使用的是子组件的数据。
原理: 子组件使用插槽(slot)包裹,并且在slot上使用v-bind定义关联对应的数据(例:v-bind:data=“XXXX”),在父组件使用时,使用slot-scope=“slot”生成slot对象。获取数据slot.data(注意:使用时vue版本在2.5.X以前都要使用template进行包裹)
<html>
<header>
<title>Title</title>
</header>
<body>
<div id="app">
<cnp>
<!-- 组件中调用 -->
<slot slot-scope="slot">
<h1 v-for="item in slot.data">{{item}}</h1>
</slot>
</cnp>
</div>
<template id="cnp">
<div>
<h2>子组件</h2>
<!-- 子组件中数据 -->
<slot :data="fruit">
<ul>
<li v-for="item in fruit">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: "Kone",
lastName: "Bula" ,
},
components: {
cnp: {
template: "#cnp",
data() {
return {
fruit:["🍎","🍇","🍉"]
}
},
},
}
})
</script>
</body>
</html>