全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术问答  > 详情

说说对插槽的理解

匿名提问者2023-05-19

说说对插槽的理解

推荐答案

  说说对插槽的理解

插槽

  回答:

  1、插槽的作用:

  插槽是用来处理组件的内容的。插槽决定了组件的内容放在组件模板的何处。插槽使用的是vue官方提供的组件来完成的。

  2、vue中的插槽分为:

  1)、单个插槽

  在组件中只有一个插槽时,插槽不用起名字。默认的名字是:default

  示例:

//1、定义组件
let book = {
template: `
<div>
<p>我是上p</p>
<!--这是插槽,该组件的内容将会渲染在此处 -->
<slot></slot>
<p>我是下p</p>
</div>
`,
}

//2、父组件的模板
<div id="box">
<book>
<!--放在组件book标签的内容,最终会渲染在book标签的<slot>处。-->
<img src="imgs/2.jpg" />
</book>
</div>

      2)、具名插槽

  但组件中的插槽多于一个时,就需要给组件起名字,用名字来区分不同的插槽。用官方组件slot的name属性给插槽起名字

  格式:

//1、组件:
let book = {
template: `
<div>
<p>我是上p</p>
<!--具名插槽,该插槽起名为s1-->
<slot name="s1"></slot>
<p>我是中p</p>
<!--具名插槽,该插槽起名为s2-->
<slot name="s2"></slot>
<p>我是下p</p>
</div>
`,
}

//2、父组件模板里:

<div id="box">
<book>
<!--以下内容插在name为s1的插槽处-->
<template v-slot:s1>
<img src="imgs/2.jpg" />
</template>
<!--以下内容插在name为s2的插槽处-->
<template v-slot:s2>
<div>我是div</div>
</template>
</book>
</div>

 

相关问答

初学编程用什么软件比较好?

媒体查询是什么

说说对插槽的理解

React.memo的使用场景

合成事件的优势

开班信息 更多>>

课程名称
全部学科
咨询

HTML5大前端

Java分布式开发

Python数据分析

Linux运维+云计算

全栈软件测试

大数据+数据智能

智能物联网+嵌入式

网络安全

全链路UI/UE设计

Unity游戏开发

新媒体短视频直播电商

影视剪辑包装

游戏原画

    在线咨询 免费试学 教程领取