Day23——slot插槽的基本使用_综合

文章目录

一. 回顾
二. slot插槽的基本使用

2.1 什么是插槽
2.2 为什么使用插槽
2.3 使用slot插槽

一. 回顾

前面学习了Day22——子组件访问父组件——parent&root，今天学习slot插槽的基本使用

二. slot插槽的基本使用

2.1 什么是插槽

总结一句话，在定义组件时，留下一个位置，不作定义，当使用组件时，可以对这个位置做任意的扩展。比如添加按钮、输入框、复选框等等

2.2 为什么使用插槽

组件开发的目的就是为了能重复利用组件，然而有时候虽然组件能重复利用，但是真正共同的地方只有局部，很多地方需要根据实际情况做改变，这时候可以使用插槽。

如下：
在这里插入图片描述

2.3 使用slot插槽

注意代码总的注释，如下：

<body>
<div id="app"><!--往组件中添加内容，就会替换插槽的内容--><cpn><button>按钮</button></cpn><cpn><span>哈哈哈</span></cpn><!--如果有多个扩展内容，将会全部替换到slot中--><cpn><i>呵呵呵</i><div>哈哈哈</div><h2>耶耶耶</h2></cpn><!--如果相同的扩展内容比较多，那么可以在插槽设置默认值--><cpn></cpn><cpn></cpn><cpn></cpn><cpn></cpn></div><template id="cpn"><div><h2>我是组件</h2><p>我是组件，哈哈哈</p><!--组件没有扩展内容，插槽则使用默认值,下面插槽slot的默认值是<button>按钮</button>--><slot><button>按钮</button></slot></div>
</template><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好',},components: {cpn: {template: '#cpn',}}}) </script>
</body>

效果：
在这里插入图片描述