vue—插槽

最新推荐文章于 2021-09-29 20:31:20 发布

原创最新推荐文章于 2021-09-29 20:31:20 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了Vue.js中的插槽使用，包括概念、具名插槽、默认插槽和作用域插槽。插槽是子组件向父组件传递复杂内容的方式，允许父组件在特定位置插入内容。通过具名插槽，可以指定内容插入的位置；默认插槽用于填充未指定名称的内容；作用域插槽则允许父组件访问子组件的数据。示例展示了如何在实际应用中使用这些插槽。

概念

插槽是一种传递复杂内容的方式，就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

插槽的使用

在子组件中放一个占位符 <slot></slot>

<template>
	<div>
		<h1>今天天气状况：</h1>
		<slot></slot>
	</div>
</template>

<script>
ecport default{
	name:'child'
</script>

在父组件中给这个占位符填充内容：

<template>
  <div>
    <div>使用slot分发内容</div>
    <div style="margin-top:30px">
      <child>
        <div>多云，最高气温34度，最低气温28度，微风</div>
      </child>
    </div>
  </div>
</template>

展示的效果

现在来看看，如果子组件中没有放插槽，同样的父组件中在子组件中填充内容，会是啥样的：

子组件代码无插槽：

<template>
	<div>
		<h1>今天天气状况：</h1>
	</div>
</template>

<script>
ecport default{
	name:'child'
</script>

父组件照常填充内容：

<template>
  <div>
    <div>使用slot分发内容</div>
    <div style="margin-top:30px">
      <child>
        <div>多云，最高气温34度，最低气温28度，微风</div>
      </child>
    </div>
  </div>
</template>

展示的效果：

在这里插入图片描述
总结：如果子组件没有使用插槽，父组件如果需要往子组件中填充模板或者html, 是没法做到的

插槽的使用 - 具名插槽

描述：具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

子组件的代码，设置了两个插槽(header和footer)：

<template>
  <div>
    <div class="header">
      <h1>我是页头标题</h1>
      <div>
        <!-- 这里放头部标题的具体内容 -->
        <slot name="header"></slot>
      </div>
    </div>
    <div class="footer">
      <h1>我是页尾标题</h1>
      <div>
        <!-- 这里放尾部标题的具体内容 -->
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>
	ecport default{
		name:'child'
	</script>

父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中

<template>
  <div>
    <div>使用slot分发内容</div>
    <div>
      <child>
        <template v-slot:header>
          <h1>我是页头的具体内容</h1>
        </template>
        <template v-slot:footer>
          <h1>我是页尾的具体内容</h1>
        </template>
      </child>
    </div>
  </div>
</template>

展示的效果：

接下来再来看看，父组件中填充内容的时候，顺序调换下，看下能不能内容能不能对应上：

子组件代码不变，父组件代码中填充顺序调换下(如图，在父组件中，footer 和 header 的填充位置对换)：

<template>
  <div>
    <div>使用slot分发内容</div>
    <div>
      <child>
         <template v-slot:footer>
          <h1>我是页尾的具体内容</h1>
        </template>
        <template v-slot:header>
          <h1>我是页头的具体内容</h1>
        </template>
      </child>
    </div>
  </div>
</template>

展示的效果：

　由此看出，即使父组件对插槽的填充的顺序打乱，只要名字对应上了，就可以正确渲染到对应的插槽中。即：父组件填充内容时，是可以根据这个名字把内容填充到对应插槽中的

插槽的使用 - 默认插槽

描述：默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把未指定插槽的填充的内容填充到默认插槽中。

示例代码如下：
1.子组件代码定义了一个默认插槽：

<template>
  <div>
    <div class="header">
      <h1>我是页头标题</h1>
      <div>
        <!-- 这里放头部标题的具体内容 -->
        <slot name="header"></slot>
      </div>
    </div>
    <div>
      <h1>我是默认插槽标题</h1>
      <div>
         <!-- 这里放默认插槽的具体内容 -->
        <slot></slot>
      </div>
    </div>
    <div class="footer">
      <h1>我是页尾标题</h1>
      <div>
        <!-- 这里放尾部标题的具体内容 -->
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

2.父组件给默认插槽填充内容：

<template>
  <div>
    <div>使用slot分发内容</div>
    <div>
      <child>
         <template v-slot:footer>
          <h1>我是页尾的具体内容</h1>
        </template>
        <template v-slot:header>
          <h1>我是页头的具体内容</h1>
        </template>
         <template >
          <h1>我是默认插槽的具体内容</h1>
        </template>
      </child>
    </div>
  </div>
</template>

展现的内容

注意：

父级的填充内容如果指定到子组件的没有对应名字插槽，那么该内容不会被填充到默认插槽中。
如果子组件没有默认插槽，而父级的填充内容指定到默认插槽中，那么该内容就“不会”填充到子组件的任何一个插槽中。
如果子组件有多个默认插槽，而父组件所有指定到默认插槽的填充内容，将“会” “全都”填充到子组件的每个默认插槽中。

插槽的使用 - 作用域插槽

如果父组件使用子组件时，插槽的值来自于子组件，那么就用作用域插槽。
分发内容要用到子组件中的数据

// 子组件 Comp
<template>
    <div >
		<slot :fc="fc"></slot>
    </div>
</template>
<script>	
	export default {
		data() {
			return {
             	fc:'等等等'
			}
		},
	}
</script>

// parent  方法1
<Comp>
	<!-- 把v-slot的值指定为作用域上下文对象 -->
	<!-- ctx为上下文对象，可以任意命名，访问fc的化就要用ctx.fc -->
	<template v-slot:default="ctx">  
		来自子组件数据：{{ctx.fc}}
	</template>
</Comp>

// parent  方法2
<Comp>
	<!-- 把v-slot的值指定为作用域上下文对象 -->
	<!-- {fc}对象解构，可以不用展开直接使用 -->
	<template v-slot:default="{fc}">  
		来自子组件数据：{{fc}}
	</template>
</Comp>

注意：具名插槽和作用域插槽的区别
组件中template 的数据是来自于父子组件的话是具名插槽，来自于子组件的话是作用域插槽。

如果想让功能更加丰富的话，比如我想根据我的input checkbox的是否选中来改变图标的颜色，该怎么做?