[JavaScript知识库]2021-11-08slot-插槽

一、插槽slot的基本使用

组件的插槽：

• 组建的插槽也是为了让我们封装的组件更加具有扩展性
• 让使用者可以决定组件内部的一些内容到底展示什么

eg.移动网站中的导航栏

• 移动开发中，几乎每个页面都 有导航栏
• 导航栏我们为您必然会封装成一个插件，比如nav-bar组件
• 一旦有了这个组件，我们就可以在多个页面中复用了

如何封装？

• 抽取共性，保留不同，将共性抽取到组件中，将不同暴露为插槽
• 一旦预留了插槽，就可以让使用者根据自己的需求决定插入什么内容

1.插槽的基本使用： <slot></slot>

2.插槽的默认值：<slot>默认值</slot>

3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素

<div id="app">
        <cpn></cpn>
        <cpn><button>插槽1</button></cpn>
        <cpn><span>插槽2</span></cpn>
        <!-- i斜体字 组件中只有一个插槽 有多个元素 会全部替换 -->
        <cpn><i>我是i</i><div>我是div</div><p>我是p</p></cpn>
</div>

<template id="cpn">
    <div>
        <h2>我是组件</h2>
        <p>我是组件啊啊啊啊</p>
        <slot><button>插槽默认按钮</button></slot>
    </div>
</template>

二、具名插槽

?实际应用中，经常对一个组件中的多个位置进行替换，故需给多个插槽设置名字

具名插槽：<slot name="×××">默认值</slot>

具名插槽的使用eg：<cpn><button slot="×××">内容</button></cpn>

<div id="app">
      <cpn><span>不会有这个</span></cpn>
      <cpn><span slot="center">大标题</span></cpn>
      <cpn><button slot="left">返回</button></cpn>
      <cpn>
        <span slot="center">大标题</span>
        <button slot="left">返回</button>
      </cpn>
</div>

<template id="cpn">
      <div>
        <h2>我是组件</h2>
        <p>我是组件啊啊啊啊</p>
        <slot name="left"><span>左</span></slot>
        <slot name="center"><span>中</span></slot>
        <slot name="right"><span>右</span></slot>
      </div>
</template>

?三、作用域插槽的使用

在学习作用域插槽之前👇

????????编译作用域：

????????父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域? ? ? ? ? ? 内编译

作用域插槽：父组件替换插槽的标签，但是内容由子组件来提供。

????????数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

cpn: {
        template: "#cpn",
        data() {
        return {
        pLanguages: ["啊", "bb", "c#", "java", "python"],
        };
        },
     },

<cpn>
          <template slot-scope="slot">
              <div>
                  <!-- 适用于vue 2.* -->
                  <span v-for="item in slot.data"> {{item}} -</span>
                  <span v-for="item in slot.data"> {{item}} *</span>

              </div>
          </template>
</cpn>
<Category>
		    <template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Zy4y1K7SH?p=105&spm_id_from=pageDriver最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV15741177Eh?p=72