v-slot 具名插槽实际运用环境

vue2.6版本，具体对插槽写法有较大的变化，老的写法将要废弃

1. 默认插槽 ，简单的插槽

2. 具名插槽：相对默认插槽组件slot标签带name命名的，可以指定位置

3.作用域插槽：子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件，其实子页面传给父页面的方法有很多)

共同点：三种插槽都需要在子组件留坑，当父组件有值的时候可以模板写入

简单说一说具名插槽的应用场景：

后台系统中，经常会遇到表格这个元素，每个页面都含有表格，写起来很不方便，这边呢，便于维护的开发，将标题查询表单表格分页等功能封装到一起，如何封装呢，简单可以拆分开功能区域，

例如标题——查询条件——处理按钮（如添加，导入，导出.....）——列表区域——分页等

这时候我们的具名插槽就很重要了，先来一波简单介绍

儿子组件：

/** Son 子组件，下面用儿子来简述*/
<template>
  <div>
      <span>你好，我是子组件</span>
      <slot name="head"></slot> 
  </div>
</template>

父组件： 

/** Parent 父组件，后面就说父亲 */
<Son>
   <template v-slot:head>
       <p>我调用子组件的时候，放一些数据展示</p>
   </template> 
</Son>

<script>
import Son from './son'  // 这边注意地址
export default {
    components:{
        Son,
    },
</script>

结果如下：

相当于parent组件调用son组件，预先在son组件中留个坑（slot） ，还是个有名字的。

多组件具名插槽，

因为我们封装的表格含有多功能，所以拆分开，头部功能 ，中间功能，底部功能等等

来看个例子：

孙子组件：

/** grandson孙子组件 后面就以孙子*/
<template>
  <div>
      <p>我是孙组件</p>
      <slot name="grandson"></slot>
  </div>
</template>

儿子组件：

/** Son子组件  后面就说儿子 */
<Grandson>
   <template v-slot:grandson>
      <p>我是儿子，我调用孙子</p>
   </template>
</Grandson>

到现在为止：跟上面一样，就是儿子组件调用孙子组件，在孙子组件先留一个name=‘grandson的’slot，此时儿子组件也被当做子组件被父亲组件调用会发生什么呢？

父亲组件：

<Son>
   <template v-slot:grandson>
      <p>我是父组件，在调用子组件的时候，放一些数据展示</p>
   </template> 
</Son>

如果这样，很明显，孙子的插槽位置已经被儿子占领了，父亲的这个p标签没地方了，所以展示

 如果需要展示父亲这段话呢，儿子的位置要给留出来，别忘了，父亲想要在儿子组件标签里展示东西，就需要儿子先预留一个坑（slot），所以，在儿子组件中写个<slot></slot>就可以了

我们将儿子组件加一个slot：

<Grandson>
    <template v-slot:grandson>
        <p>我是儿子，我调用孙子</p>
        <slot name="grandson"></slot>
    </template>
</Grandson>

当然，可以儿子组件不需要那个 p标签，这样相当于父亲调用儿子，想跟儿子说个话（这个相当于父亲在儿子标签中写一些内容），儿子调用孙子，孙子有插槽，儿子没有额外的话（儿子没有在孙子标签里写额外的话，但是他要提供坑给他的父亲），所以父亲可以直接把话给孙子。

知道这么个具体，那么我们的封装思路也开始明朗，可以把父组件的一些标题值放在插槽中，然后渲染到后代组件里，问题来了，值可以，那么方法呢？也是可以的。

儿子：

<template>
  <div>
      <Grandson>
            <template v-slot:grandson>
                <slot :onSearch='handleSearch' name="grandson"></slot>
            </template>
      </Grandson>
  </div>
</template>

<script>
import Grandson from './grandson'
export default {
    components:{
        Grandson
    },
    data() {
        return {
            
        }
    },
    methods: {
        handleSearch(){
            console.log('有人点我，我被触发了')
        }
    },
    created() {
    },
}
</script>

父亲：

/**父亲 */
<Son>
  <template v-slot:grandson='A'>
    <p>我是父组件，在调用子组件的时候，放一些数据展示</p>
    <button @click="A.onSearch">父组件按钮，点击一下能不能触发子组件里的方法</button>
  </template> 
</Son>

点击按钮，结果

 这个相当于父亲里面有个点击事件，点击后触发了grandson插槽的onSearch属性，而onSearch属性在儿子中是个方法，随之调用方法，至于想传值的话，那就在父组件带入参数即可。

有了这个demo，那么搜索按钮功能迎刃而解，本人前端小白，有什么问题，可以提出来大家一起解决，一起进步。