在生活中，插槽目的是为了让我们原来的设备具备更多的扩展性；
- 组件的插槽也是为了让我们封装的组件更加具有扩展性。
- 让使用者可以决定组件内部的一些内容到底展示什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<chilrderhtml><button>案例</button></chilrderhtml>
<chilrderhtml><span>第二次</span></chilrderhtml>
<chilrderhtml><i>第三次</i></chilrderhtml>
<chilrderhtml></chilrderhtml>
</div>
<template id="chilrderhtml">
<div>
<h2>我是组件</h2>
<p>我是组件，哈哈哈</p>
<!--
这个slot插槽，就是为扩展该组件提供一个位置
这个位置可以在多次引用中，放入不同其它标签
抽取共性，保留不同
-->
<slot>
<!--
这个span默认值标签就是当组件在其他地方引用时，
如果没有设置，就会启动这个默认值
-->
<span>默认值</span>
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el:'#app',
data:{
message:'你好啊'
},
components:{
chilrderhtml:{
template:'#chilrderhtml'
}
}
});
</script>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<chilrderhtml>aaa</chilrderhtml>
<chilrderhtml>
<span slot="center">bbbb</span>
</chilrderhtml>
</div>
<template id="chilrderhtml">
<div>
<!--没有名字的slot,在外被引用，会被更改
而有name的slot是不会被更改的
-->
<slot name="left"><span>我是左边</span></slot>
<slot name="center"><span>我是中间</span></slot>
<slot name="right"><span>我是右边</span></slot>
<slot>sss</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: '#app',
data: {
message: '你好啊'
},
components: {
chilrderhtml: {
template: '#chilrderhtml'
}
}
});
</script>
</body>
</html> ![Spring MVC 自学杂记（五） -- SpringMVC与前台的json数据交互[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)