vue的插槽解析

插槽

**好处:**组件的内容结构可定制 用slot插槽进行占位

语法: 子组件中通过slot进行占位

理解:父组件,在子组件标签嵌套的内容就会被渲染到slot地方

一、默认插槽

javascript 复制代码
//子组件
<slot>slot插槽</slot> //方法一

<slot name="default">slot插槽</slot> //方法二
javascript 复制代码
//父组件
<exercise-first>slot插槽</exercise-first>

二、具名插槽

javascript 复制代码
//子组件
<slot name="header"></slot>

通过指定 name 属性来定义一个具名插槽。在使用组件时,可以将内容分发到对应的具名插槽中。

javascript 复制代码
//父组件  v-slot:main
<exercise-first>
      <template v-slot:main>
        <div>具名组件</div>
      </template>
</exercise-first>

注意:

一、通过v-slot:来查找具名插槽

二、为什么用template, template等于是一个包,不是div盒子,页面是看不到template标签的

三、作用域插槽

作用域插槽的语法 : v-slot:slotName="parameter",其中 slotName 是插槽的名称,parameter 是接收子组件数据的参数。

接收: 的是已 对象的形式

javascript 复制代码
//父组件中定义的
<template v-slot:slotname2="obj">
//子组件中定义的
<slot name="slotname2" :item1='item' value="111" ></slot>

案例:

javascript 复制代码
<!-- 子组件 -->
<template>
  <div>
    <slot name="item" v-for="item in items" :item="item"></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <div>
    <template v-slot:item="{ item }">
      <p>{{ item }}</p>
    </template>
  </div>
</template>

四、具名插槽缩写写法

v-slot缩写#

v-onv-bind 一样,v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为**#header:**

javascript 复制代码
   <template v-slot:dalete></template>
	等同于:
      <template #dalete></template>
javascript 复制代码
<slot name="header"></slot>
<!-- 缩写写法 -->
<slot name="header"/>
相关推荐
都叫我大帅哥41 分钟前
深入浅出 Resilience4j:Java 微服务的“免疫系统”实战指南
java·spring cloud
Cao_Shixin攻城狮3 小时前
Flutter运行Android项目时显示java版本不兼容(Unsupported class file major version 65)的处理
android·java·flutter
2301_780789664 小时前
UDP和TCP的主要区别是什么
服务器·网络协议·web安全·网络安全·udp
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
Dcs5 小时前
还在用 Arrays.hashCode?Java 自己也能写出更快的版本!
java
一个龙的传说7 小时前
linux 常用命令
linux·服务器·zookeeper
拾光拾趣录7 小时前
括号生成算法
前端·算法
fouryears_234177 小时前
Spring,Spring Boot 和 Spring MVC 的关系以及区别
java·spring boot·spring·mvc
阿葱(聪)8 小时前
java 在k8s中的部署流程
java·开发语言·docker·kubernetes