当前位置：网站首页>组件化高级--插槽

组件化高级--插槽

2022-07-17 10:18:00 【_语义错误】

一、solt（插槽）简介：

1、引入：

一、solt（插槽）简介：

1、引入：

生活中的插槽，电脑的USB插槽，插板当中的电源插槽。
插槽的目的是让我们原来的设备具备更多的扩展性。比如电脑的USB我们可以插入U盘、硬盘、音响、键盘、鼠标等。

2、组件的插槽：

组件的插槽也是为了让封装的组件更加具有扩展性。让使用者决定展示什么内容到组件内部。
例子：移动网站中的导航栏。移动开发中，几乎每个页面都有导航栏。导航栏我们必然会封装成一个插件，比如 nav-bar 组件。有了这个组件，就可以在多个页面中复用了。
但是，每个页面的导航是一样的吗？不是的，我们可以以京东为例

3、如何去封装这类的组件呢？

它们有区别，也有共性。
如果，我们每一个单独去封装一个组件，显然不合适：比如每个页面都返回，这部分内容我们就要重复去封装。但是，如果我们封装成一个，也不合理：有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字，等等。

4、如何封装合适呢？抽取共性，保留不同。

最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
一旦我们预留了插槽（相当于预留了一块空间），就可以让使用者根据自己的需求，决定插槽中插入什么内容。是搜索框，还是文字，还是菜单。由调用者自己来决定。

5、slot基本使用

在子组件中，使用特殊的元素<slot>就可以为子组件开启一个插槽。
该插槽插入什么内容取决于父组件如何使用。

6、例子：

插槽的基本使用 <slot></slot>
插槽的默认值 <slot>button</slot>
如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素
<slot>中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容

<body>
<div id="app">
	<!-- 2.插槽的默认值 <slot>button</slot> -->
	<cpn></cpn>
	
	<!-- 有插槽内容，不显示默认值，显示父组件里添加的内容 -->
	<cpn><button>1按钮</button></cpn>
	<cpn><span>2 span 哈哈哈</span></cpn>
	<cpn><i>3 i 呵呵呵</i></cpn>
	<cpn><button>4 按钮</button></cpn>
	
	<!-- 3.如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素 -->
	<cpn>
		<i>元素i呵呵呵</i>
		<div>元素div</div>
		<span>元素span哈哈哈</span>
		<p>元素p</p>
	</cpn>
	
	<!-- 没有指定插槽内容，显示默认值 -->
	<cpn></cpn>
	
</div>

<template id="cpn">
	<div>
		<h2>我是组件</h2>
		<p>我是组件，哈哈哈</p>
		<!-- 	1.插槽的基本使用 <slot></slot> -->
		<slot><button>按钮</button></slot>
	</div>
</template>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
	  el: '#app',
	  data: {
	    message: '你好啊'
	  },
	  components: {
	    cpn: {
	      template: '#cpn'
	    }
	  }
	})
</script>
</body>

二、具名插槽 slot

当子组件的功能复杂时，子组件的插槽不是一个。比如我们封装一个导航栏的子组件，需要三个插槽，分别代表左边、中间、右边。那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？这个时候，我们就需要给插槽起一个名字
如何使用具名插槽呢？给 slot 元素一个 name 属性 <slot name='myslot'></slot>

<body>
	
<div id="app">
	<cpn><span>被替换的</span></cpn>
	<cpn><span slot="center">替换有name的</span></cpn>
	
	<!-- 替换有 name 的插槽 -->
	<cpn><span slot="left">替换left</span></cpn>
	
	<!--不同标签间的替换， 用 button 替换 span -->
	<cpn><button>不同标签的替换</button></cpn>
</div>

<template id="cpn">
	<div>
		<slot name="left"><span>左边</span></slot>
		<slot name="center"><span>中间</span></slot>
		<slot name="right"><span>右边</span></slot>
		<slot><span>没有name</span></slot>
	</div>
</template>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
	  el: '#app',
	  data: {
	    message: '你好啊'
	  },
	  components: {
	    cpn: {
	      template: '#cpn'
	    }
	  }
	})
</script>
</body>

二、编译作用域

学习插槽之前需要先理解一个概念：编译作用域。
用例子来理解这个概念：

考虑下面的代码是否最终是可以渲染出来的：
<my-cpn v-show="isShow"></my-cpn>中，这里使用了isShow属性。
提示：isShow属性包含在组件中，也包含在Vue实例中。
答案：最终可以渲染出来，也就是使用的是Vue实例的属性。

为什么呢？

官方给出了一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
而我们在使用<my-cpn v-show="isShow"></my-cpn>的时候，整个组件的使用过程是相当于在父组件中出现的，他的作用域就是父组件，使用的属性也是属于父组件的属性。

<body>

<div id="app">
  <cpn v-show="isShow"></cpn>
  <cpn v-for="item in names"></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是子组件</h2>
    <p>我是内容, 哈哈哈</p>
    <button v-show="isShow">按钮</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: true
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            isShow: false
          }
        }
      },
    }
  })
</script>

</body>

作用域插槽：准备
作用域插槽就是--父组件替换插槽的标签，但是内容（数据）由子组件来提供。
我们先提一个需求：
子组件中包括一组数据，比如：pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
需要在多个界面进行展示：某些界面是以水平方向一一展示的，某些界面是以列表形式展示的，某些界面直接展示一个数组
内容在子组件，希望父组件告诉我们如何展示，怎么办呢？利用slot作用域插槽就可以了

作用域插槽：使用
在父组件使用我们的子组件时，从子组件中拿到数据：

我们通过<template slot-scope="slot">获取到 slot 属性
在通过 slot.data 就可以获取到刚才我们传入的data了

<body>
	
<div id="app">
<!-- 列表形式展示 -->
	<cpn></cpn>
	

<!-- 水平形式展示 -->
<!-- <cpn>
	<span>JavaScript-</span>
	<span>C++-</span>
</cpn> -->
<!-- 2、上面的方法一个个插入不方便，用作用域插槽，在父组件里添加内容，在子组件里拿数据 -->
<cpn>
	<!-- 目的：获取子组件中的 PLanguages 
	vue2.5x 以下用 <template slot-scope(引用)="插槽名（自定义"></template>-->
	<template slot-scope="slot">
		<!-- <span v-for="item in slot.data">{
   {item}}-</span> -->
		<!-- 发现运行后，在最后的 item 后面还有分隔符-，所以改用函数 join -->
		<span>{
   {slot.data.join('-')}}</span>
	</template>
</cpn>

<!-- 用 * 号做分割符 -->
<cpn>
	<template slot-scope="slot">
	<span>{
   {slot.data.join('*')}}</span>
	</template>
</cpn>

</div>

<template id="cpn">
	<div>
		<!-- 1、在插槽里定义属性 data ，data属性名是任意取的，让其指向pLanguages -->
		<slot :data="pLanguages">
			<ul>
				<li v-for="item in pLanguages">{
   {item}}</li>
			</ul>
		</slot>
			
		
	</div>
</template>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
	  el: '#app',
	  data: {
	    message: '你好啊',
			isShow:true
	  },
	  components: {
	    cpn: {
	      template: '#cpn',
				data(){
					return {
						pLanguages:['JavaScript','C++','Java','C#','python','Go','Swift']
					}
				}
	    }
	  }
	})
</script>
</body>

运行结果：