30.Slot插槽

在生活中,插槽目的是为了让我们原来的设备具备更多的扩展性;

组件的插槽

  • 组件的插槽也是为了让我们封装的组件更加具有扩展性。
  • 让使用者可以决定组件内部的一些内容到底展示什么。

以下是slot的基本使用

<!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>

02.具名插槽的使用

<!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>