vue 插槽的使用

一 插槽使用比较多的作用是:

　　对引用的组件中传入自定义标签,  对,是标签不是变量, 变量直接传过来就好了,就不需要插槽了, 但是有时候我们封装的组件中,需要添加一段自定义模块,可以是列表,可以是一句话,这时就需要用到插槽

 

二 插槽类型:

• 匿名插槽
• 具名插槽  

 

三 插槽使用

　1.　匿名插槽

　　父组件中: 

<template>
  <div class="slotFather_container">
    <h3>我是父级元素</h3>

    <slotChild>
      <p>不要灰心</p>
    </slotChild>

  </div>
</template>
<script>
import slotChild from './components/slotChild.vue'
export default {
  name: "slotFather",
  components: {
    slotChild
  },
};
</script>

 

子组件中: 

<template>
  <div class="slotChild_container">
    <h3>有句话想要送给你: </h3>

    <!-- 匿名插槽 -->
    <!-- <slot></slot> -->

    <!-- <p>----------分界线----------</p> -->

    <!-- 匿名插槽 -->
    <!-- <slot></slot> -->

    <!-- <p>----------分界线----------</p> -->

  </div>
</template>
<script>
export default {
  name: "slotChild",
};
</script>

 

显示结果

 

分析

1. 在引用的子组件中直接 加上标签和内容 ( <p>不要灰心</p> ) ,并未起作用
2. 将子组件中  <slot></slot> 注释放开,显示如下: 说明插槽起作用了,且写子组件中写几个插槽,就会显示几遍  

 

2. 具名插槽

父组件:

<template>
  <div class="slotFather_container">
    <h3>我是父级元素</h3>

    <slotChild>
      <template slot="word">
        <div>
          <p>我告诉你我喜欢你</p>
          <p>并不一定要和你在一起</p>
          <p>只是希望今后的你</p>
          <p>在遭遇人生低谷的时候</p>
          <p>不要灰心</p>
          <p>至少曾经有人被你的魅力所吸引</p>
          <p>曾经是,以后也会是</p>
        </div>
      </template>
    </slotChild>

  </div>
</template>
<script>
import slotChild from './components/slotChild.vue'
export default {
  name: "slotFather",
  components: {
    slotChild
  },
};

 

子组件: 

<template>
  <div class="slotChild_container">
    <h3>有句话想要送给你: </h3>

    <!-- 具名插槽 -->
    <slot name="word"></slot>
  </div>
</template>
<script>
export default {
  name: "slotChild",
};
</script>

 

显示结果:

 

分析: 

1. 父组件中使用 template 标签包含添加的内容,并自定义属性slot的值, 在子组件中  通过slot 标签的 name值去接, 保持一致就会生效
2. 同样在子组件中写 几遍  <slot name="word"></slot> 就会生成几遍自定义标签

 

分享一刻: 

　　6个最常见的网页可访问性问题

　　可访问性（accessibility）指的是，网页对生理缺陷的用户是否友好。本文总结了6个最常见的可访问性问题及其解决方法，比如上图是文字对比度不够，导致弱视用户阅读困难。