vue 插槽的简单总结及实际运用

前言

vue的插槽其实官方文档中的介绍已经很容易看懂了。这里再简单做一下总结。

用处

项目中还是很常需要用到插槽的，比如想抽离一个表单组件，虽然这个表单虽然大部分地方都是一样的，但是还是有个别是不同的，比如页面A中多了一个下拉选择框，这个时候如果想要抽离这个组件就需要用到插槽了。
前段时间写了一个车牌号输入控件，里面的自定义输入框，就是通过插槽实现的。

介绍

插槽可以分为两种类型：

• 具名插槽
  定义：通过name来定义，没有定义的则是默认插槽
  使用： 通过v-slot来使用，没有通过v-slot的则是使用默认插槽

  • 需要注意的点
    v-slot只有在只存在默认插槽的情况下，才能写在组件标签上，否则只能在组件标签的外围再包裹一层template，然后写在template上。

• 作用域插槽
  目的： 为了可以在父模板中访问到子模板的值。因为根据规则，父模板是无法访问子模板的数据的。
  具体用法：

  • 在子模板中通过v-bind绑定一个值， v-bind:name=‘name’
  • 在父模板中通过v-slot来获取子模板绑定的值：v-slot=‘name’，当然，如果是具名插槽需要加上名称：v-slot:footer=‘name’

talk is cheap，show me the code。就按上面提到的例子，抽离一个表单组件：
目录结构如下：

这里有两个页面，a和b，抽离组件form。具体代码如下：

// 组件 form
<template>
  <div>
    <!-- 
      每个页面共有的可以放到插槽外面，或者放到插槽里面作为插槽的默认内容，
      但是注意，如果作为插槽默认内容的话，一但插槽有内容那么默认内容是不显示的
    -->
    <div>
      姓名：<input>
    </div>

    <!-- 默认插槽 -->
    <slot></slot>

    <!-- 具名插槽 -->
    <slot name="footer"></slot>

    <!-- 作用域插槽，这里把obj绑定到了value上 -->
    <slot name="head" :value="obj"></slot>
  </div>
</template>
<script>
export default {
  data () {
    return {
      obj: {
        name: '插槽'
      }
    }
  }
}
</script>

// 页面 A
<template>
  <div>
    <div>page A</div>
    <br/>
    <cform>
      <!-- 因为form组件存在多个插槽，所以这里的v-slot只能写在template上，不能写在cform上 -->
      <template v-slot:head="data">
        <!-- 这里拿到的就是form组件里面绑定到value上面的obj数据。也就是作用域插槽 -->
        作用域插槽，来自子模块中的数据：{{data.value.name}}
      </template>
    </cform>
  </div>
</template>
<script>

import cform from './components/form'
export default {
  components: {
    cform
  },
  data () {
    return {
      
    }
  }
}
</script>

// 页面 B
<template>
  <div>
    <div>page B</div>
    <br/>
    <cform>
      <!-- 具名插槽 -->
        <template v-slot:footer>
          <div>
            年龄：<input>
          </div>
        </template>
      <!-- 默认插槽 -->
        <template>
          <div>
            性别：<input>
          </div>
        </template>

        <!-- 
          这里虽然具名插槽在前，默认插槽在后，
          但是在渲染的时候还是得看form组件里面哪个在前，在前的先渲染 
        -->
    </cform>
  </div>
</template>
<script>

import cform from './components/form'
export default {
  components: {
    cform
  },
  data () {
    return {
      
    }
  }
}
</script>

主要代码如上。页面结果如下：

以上是vue插槽的一点总结及实际应用。当然，vue插槽的作用远不止这点，这就需要在项目中灵活运用了。