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"/>
相关推荐
逊嘘8 分钟前
【Java语言】抽象类与接口
java·开发语言·jvm
morris13115 分钟前
【SpringBoot】Xss的常见攻击方式与防御手段
java·spring boot·xss·csp
我要洋人死21 分钟前
导航栏及下拉菜单的实现
前端·css·css3
龙哥说跨境32 分钟前
如何利用指纹浏览器爬虫绕过Cloudflare的防护?
服务器·网络·python·网络爬虫
科技探秘人32 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人33 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR38 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香40 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
Jacob程序员41 分钟前
java导出word文件(手绘)
java·开发语言·word
ZHOUPUYU41 分钟前
IntelliJ IDEA超详细下载安装教程(附安装包)
java·ide·intellij-idea