VUE插槽slots
插槽的使用
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>插槽slots</title>
<style>
.panel {
max-width: 300px;
border: 1px solid #999;
margin-bottom: 15px;
}
.panel>* {
padding: 15px;
}
.panel .title {
border-bottom: 1px solid #cccccc;
}
.panel .content {
border-bottom: 1px solid #cccccc;
}
</style>
</head>
<body>
<div id="app">
//<!-- 插槽测试1 -->
//<!-- <panel>YOYOYO</panel>
//<panel>wanghuahua</panel> -->
///<!-- 插槽测试2 -->
<panel>
<div slot="title">
标题标题标题
</div>
<div slot="content">
YOYOYO
</div>
<div slot="footer">
更多信息
</div>
</panel>
</div>
<template id="panel-tpl">
<div class="panel">
<div class="title">
//<!-- 标题标题标题 -->
//<!-- 运用插槽2的方式 在title处加入插槽并定义name为title
//在自定义标签中加子元素div 添加div的属性slot=title 使他们双向绑定-->
<slot name="title"></slot>
</div>
<div class="content">
//<!-- 内容内容内容 -->
//<!-- 插槽1 直接添加slot 在自定义标签中直接输入内容即可
//只可以动态修改一个-->
//<!-- <slot></slot> -->
//<!-- 插槽2 在slot中添加name属性 在自定义标签中加子元素div
//添加div的属性slot 让div的属性slot指向插槽中的name属性即可 动态修改多个 -->
<slot name="content"></slot>
</div>
<div class="footer">
// <!-- 更多信息 -->
<slot name="footer">
// <!-- 直接在slot插槽里指定的就是默认值
//在自定义标签中未指定时，使用默认信息 -->
YOYOYO
</slot>
</div>
</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="index.js"></script>
</body>
</html>
JS
Vue.component('panel', {
template: '#panel-tpl'
})
var app = new Vue({
el: '#app',
data: {
}
})
