vue三种插槽,小白秒懂系列

本文介绍了Vue.js中插槽的三种类型:匿名插槽用于父组件传递单一结构到子组件;具名插槽允许父组件向子组件传递多个结构;作用域插槽则使得子组件的数据能被父组件在插槽内容中使用,实现更灵活的交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

插槽使用的2个步骤

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

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

一.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>
  1. 父组件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结构会毫无保留的传递给子组件中的插槽。

二.具名插槽

具名插槽语法:

1.给子组件的添加name属性 : name=“插槽名”

  1. 父组件使用v-slot:插槽名 : 给指定的插槽传递结构
  • 注意:这个v-slot指令必须要写在标签中,否则会报错
  • 是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 :属性名=“属性值” >

2.给父组件的添加v-slot属性接收数据:

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

作用域插槽作用:

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

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>
Vue插槽是一种用于在组件中预留代码空间的技术。其中,匿名插槽是一种没有命名的代码空间,可以在组件中定义,并在使用组件时直接替换为相应的内容。匿名插槽可以通过在组件内部使用`<slot></slot>`标签来定义和使用。 匿名插槽的使用示例如下: ```html <template> <div> <h1>插槽示例</h1> <slot></slot> </div> </template> ``` 在上述示例中,`<slot></slot>`标签表示一个匿名插槽,它在组件中定义了一个预留的代码空间。当使用这个组件时,可以在组件标签内部添加内容,这些内容将会替换掉匿名插槽的位置。例如: ```html <template> <div> <h1>插槽示例</h1> <slot></slot> <p>这是插槽下面的内容。</p> </div> </template> ``` 在这个示例中,`<slot></slot>`标签所占的位置将被替换为插槽标签内部的内容。 需要注意的是,匿名插槽的样式不能通过在`<slot>`标签上添加样式来进行设置。另外,具有命名的插槽不能被不含`slot`属性的标签内容替换,会显示具名插槽的默认值。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue:匿名slot、具名slot、作用域slot(技术栈Vue3 + TS)](https://blog.csdn.net/snowball_li/article/details/123298575)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue插槽slot的简单理解与用法实例分析](https://download.csdn.net/download/weixin_38690545/14901358)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值