vue中三种插槽的介绍和用法,小白秒懂系列

插槽作用: 父组件 传递 结构 给子组件

插槽使用的2个步骤

第一步: 在子组件中定义一个插槽<slot>默认值:如果父组件没有传递则默认显示</slot>

第二步: 在父组件中传递结构:<子组件>父组件需要传递的结构</子组件>

一.slot匿名插槽

1.子组件goods.vue

<template>
  <div class="son">
    <h3>我是子组件</h3>
    <h4>商品名称</h4>
    <!-- 插槽：可以让父组件决定这里放什么。 也可以设置默认值 -->
    <slot>我是默认值</slot>
  </div>
</template>

<script>
export default {
  name: "goods",
  data() {
    return {}
  }
}
</script>

<style scoped>
.son {
  border: 1px solid red;
}
</style>

2.父组件App.vue

<template>
  <div id="app">
    <h1>我是父组件</h1>
    <!-- 子组件1：插入购买链接 -->
    <goods>
      <button>
        <a href="http://www.jd.com">点击购买</a>
      </button>
    </goods>
    <!-- 子组件2：插入禁用点击的按钮 -->
    <goods>
      <button disabled>已卖完</button>
    </goods>
    <!-- 子组件3：没有插入内容，则显示默认插槽 -->
    <goods></goods>
  </div>
</template>

<script>
//导入局部组件
import goods from "./components/goods.vue"
export default {
  data() {
    return {}
  },
  components: {
    goods
  }
}
</script>

<style>
#app {
  border: 1px solid #000;
}
</style>

总结:匿名插槽中所使用的的插槽没有"名字",父组件中传递的所有html结构会毫无保留的传递给子组件中的<slot></slot>插槽。

二.具名插槽

具名插槽语法: 

1.给子组件的<slot>添加name属性 ： name="插槽名"

2.父组件使用v-slot:插槽名 : 给指定的插槽传递结构

     

• 注意：这个v-slot指令必须要写在<template>标签中,否则会报错

• <template>是HTML5新增的一个语义化标签，模板的意思。 这个标签本身不会被渲染，因此最终在页面是看不见的。 这个标签类似于div,就是一个空盒子容器。 与div唯一的区别就是它不会渲染。

具名插槽作用： 父组件 传递多个html结构 给子组件

                           给不同slot分发不同内容

子组件:cell.vue

<template>
  <div class="cell">
      <div class="title" >
          <slot name="a">我是标题</slot>
      </div>
      <div class="content" >
          <slot name="b">我是内容</slot>
      </div>
      <div class="right" >
          <slot name="c">我是图标</slot>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
    .cell{
        border: 1px solid #f00;
        height: 60px;
        padding: 10px;
        position: relative;
    }

    .title{
        float: left;
        
    }

    .content{
        position: absolute;
        bottom: 10px;
        left: 10px;
    }

    .right{
        float: right;
    }
</style>

App.vue

<template>
  <div id="app">
    <h1>我是父组件</h1>
    <cell>
        <template v-slot:a>
            <strong>我是h3</strong>
            <span>标题内容</span>
        </template>
        <template v-slot:b>
            <a href="#">我是链接</a>
        </template>
        <template #c>
            <button>我是按钮</button>
        </template>
    </cell>
  </div>
</template>

<script>
//导入局部组件
import cell from "./components/cell.vue"
export default {
  data() {
    return {}
  },
  components: {
    cell
  }
}
</script>

<style>
#app {
  border: 1px solid #000;
}
</style>

三.作用域插槽

作用域插槽语法如下

1.给子组件的<slot>添加一个自定义属性 : <slot :属性名="属性值" ></slot>

2.给父组件的<template>添加v-slot属性接收数据: <template v-slot="对象名"></template>

父组件使用子组件内部数据语法： 对象名.属性名

作用域插槽作用：

父组件 给 子组件 传递插槽 时，可以使用子组件内部的数据

App.vue

<template>
  <div>
      <!-- 
      1.匿名插槽 : 父组件传递 一个html结构 给子组件 
        (1)子组件:  <slot> 插槽默认内容 </slot>
        (2)父组件:  <子组件> html结构 </子组件>

      2.具名插槽 : 父组件传递 多个html结构 给子组件
        (1)子组件: 给插槽添加一个name(插槽名)
          <slot name="插槽名"> 插槽默认内容  </slot>
        (2)父组件: 使用 v-slot:插槽名 或  #插槽名
          <子组件> 
            <template v-slot:插槽名>
                html结构
            </template>
          </子组件>

      3.作用域插槽: 子组件传递 数据 给父组件插槽
        (1)子组件 : 给<slot>内置组件添加自定义属性
          <slot 属性名="属性值" > 插槽默认内容 </slot>
        (2)父组件 : 使用 v-slot="对象名"
     -->
     <scope>
       <template v-slot="obj">
         <p>{{ obj.a }}</p>
         <p>{{ obj.b }}</p>
         <p>{{ obj.c }}</p>
       </template>
     </scope>
  </div>
</template>

<script>
//导入局部组件
import scope from './components/scope.vue'
export default {
  //注册组件
  components: {
    scope
  },
  data() {
    return {

    }
  },
  
};
</script>

<style>
#app {
  border: 1px solid #000;
}
</style>

scope.vue

<template>
  <div class="box">
      <h2>学习作用域插槽</h2>
      <input v-model="msg" type="text" placeholder="输入搜索内容">
      <br>
      <!-- 定义插槽 -->
      <slot a="1" b="2" :c="msg"> 插槽默认内容 </slot>
  </div>
</template>

<script>
export default {
    data() {
        return {
           msg:''
        }
    },
}
</script>

<style scoped>

.box{
    border: 1px solid #000;
}
</style>

作用域插槽其实就是相当于子传父,<slot :属性名="属性值" ></slot>相当于子组件中有数据,父组件中的<template>添加v-slot属性接收数据: <template v-slot="对象名"></template>,这样就实现了数据的传递!