vue插槽的学习

插槽slot

一、插槽是什么

个人理解：插槽就是将外部传进来的组件、文本等，插入到定义的组件内部。就好比<table><tr></tr></table>，table标签内部可以插入tr标签一样

二、插槽有什么用

• 1、可以提高组件的扩展性
• 2、可以提高组件的复用性

三、基本使用

• 1、定义一个组件，可以通过传入参数来修改button

Vue.component('a-button', {
  props: ['title'],
  template:'<button type="submit">
  					<slot>{{ title }}</slot>
			</button>'
})

• 2、使用自定义的组件

<a-button><button>提交<button></a-button>

• 3、效果
  

slot里面可以带有默认组件<slot><button>默认按钮</button></slot>,如果对组件不进行插入标签，将会渲染<button>默认按钮</button>,否则渲染插入的标签

四、具名插槽

1、手机导航栏的框架实现,这里只展示组件的一个实现

<template>
  <div>
    <slot name = 'left' ><span>左边</span></slot>
    <slot name = 'center'><span>中间</span></slot>
    <slot name = 'right' ><span>右边</span></slot>
  </div>
</template>

2、使用

<div>
    <navigation-bar>
      <span slot = 'left'>这里将显示左边</span>
      <span slot = 'right'>这里将显示在右边</span>
      <span slot = 'center'> 这里将显示在中间</span>
    </navigation-bar>
</div>

3、效果

当组件内部有多个未命名插槽时，组件插入的所有标签将会全部插入到各个<slot>外部标签</slot>里面。当使用标签的定位插槽时，未找到将会忽略这个标签

5、作用域插槽

• 1、实现一个小的表格

<template>
  <!--定义组件-->
  <table>
    <tr><th v-for="key in columns" :key="key">{{ key }}</th></tr>
    <tr v-for="record in records" :key="record">
      <slot :data="record"><td v-for="item in record" :key="item">{{ item }}</td></slot>
    </tr>
  </table>
</template>

<script>
// 导出数据
export default{
  name: 'MyTable',
  data () {
    return {
      columns: ['年龄', '姓名'],
      records: [{name: '张三', age: 18}, {name: '李四', age: 19}]
    }
  }
}
</script>

• 2、使用

<template>
  <div>
    <my-table>
      <template slot-scope="records">
        <span>{{ records }}</span>
      </template>
    </my-table>
  </div>
</template>

3、效果

vue2.6以后使用的v-slot