2021-10-28 vue笔记-组件化开发(六) 插槽(slot):匿名插槽,具名插槽和作用域插槽

0.定义

1.特性

提高组件的重用能力

2.理解

插槽就是在子组件中挖个坑,坑内内容由父组件决定,用<slot></slot>来表示

3.分类

匿名插槽:没给插槽slot起名字
具名插槽:给slot起名字(定义具名插槽:使用到name特性)
作用域插槽:本质是携带信息的匿名插槽

1.匿名插槽

例子

  <div id="app"><header1>官网</header1><p>我是正文</p></div><script>Vue.component('header1', {
      template: `<div>我是<slot></slot>的header</div>`});var vm = new Vue({
      el: "#app"});</script>

结果

我是官网的header
我是正文

2.具名插槽

子组件把多个插槽放置在不同地方,父组件根据插槽名字填充对应内容

例子:

    <div id="app"><view1><div>商品参数</div><div><img src="https://ftp.bmp.ovh/imgs/2021/05/b86a125cadd68fb3.png" alt=""></div><div slot="header">我是头部</div><div slot="footer">我是底部</div></view1></div>
</body>
<script>Vue.component('view1', {
      // 具名插槽:对slot起名字template: `<div><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer></div>`});var vm = new Vue({
      el: "#app"}); </script>

结果

3.作用域插槽

可以携带数据:子组件提供数据,父组件提供样式

例子

<div id="app"><header1><div slot-scope="df"><h1>查询书籍:{
   {df.info}}</h1></div></header1>
</div>
<script>Vue.component('header1', {
      // 作用域插槽:本质是一个携带信息的匿名插槽data() {
      return {
      book: 'javascript从入门到精通'}},template: `<div><slot :info="book"></slot>,剩余馆藏:2</div>`});var vm = new Vue({
      el: "#app"}); </script>

结果: