Vue中slot插槽使用与理解

[Talk is cheap. Show me the code]

不想看理论知识请直接移步最后代码示例。

一、插槽指的是什么

你可以把slot简单的理解为，向父组件向子组件中传递HTML，我们可以根据不同的页面传递不同的html模板到子组件中，已到达在不同的业务场景显示不同的页面的要求，当然你也可以传递数据、方法。slot又包括三种插槽，匿名插槽、具名插槽、作用域插槽。
如果你想要更精细的解释请移步
Vue官网slot
知乎：如何理解Vue.js的组件中的slot?

二、代码示例

2.1匿名插槽的使用

父组件中调用子组件TransportDialog

    <TransportDialog
      ref="transportForm"
      :show.sync="dialogFormVisible"
      :dialogdatas="dialogdatas"
      :form="transportForm"
      @btnConfirm="btnConfirm"
    >
      <template>
        <div>
          我是一个匿名的插槽
        </div>
      </template>
      
    </TransportDialog>

子组件中预留好了 槽 ，如果父组件中的slot有名字，template就会显示在与slot中name相对应的位置，如果没有就回显示在默认的slot位置。

匿名插槽的显示
 <slot />

2.2具名插槽的使用

    <TransportDialog
      ref="transportForm"
      :show.sync="dialogFormVisible"
      :dialogdatas="dialogdatas"
      :form="transportForm"
      @btnConfirm="btnConfirm"
     >
      <template slot="test" >
        <div>
          我是一个具名插槽：slot="test"
        </div>
      </template>
    </TransportDialog>

 <slot name="test"  />
 

2.3作用域插槽

作用域插槽其实就是 [插与槽] 的数据传递，可以简单理解为父子组件间的数据传递。
Vue官方连概念都省了，有时候不得不感叹官网文档的精简。(大雾)

父组件

   <TransportDialog2
      ref="transportForm"
      :show.sync="dialogFormVisible"
      :dialogdatas="dialogdatas"
      :form="transportForm"
      @btnConfirm="btnConfirm"
    >
      <!-- 2.6 slot-scope已经被废弃 -->
      
      <template slot="test" slot-scope="props">
        <el-form-item label="名称">
          <el-input
            v-model="props.testFn"
            placeholder="请输入名称"
            @keyup.native="slotFn(props.testFn)"
          />
        </el-form-item>
      </template>

      <template slot="test" v-slot="testFn">
        <el-form-item label="名称">
          <el-input
            v-model="testFn"
            placeholder="请输入名称"
            @keyup.native="slotFn(testFn)"
          />
        </el-form-item>
      </template> 
      
    </TransportDialog2>

data(){
    return{
    /** 这里是测试传递给子组件的值*/
         testFn: '测试'
    }
},
methods:{
    slotFn(data){
        console.log(data)   //这里就是input里绑定的值
    }
}

子组件放置slot处

 <slot name="test" :testFn="testFn" />

三、业务场景

为了便于理解，因此把业务场景加进来。

父组件是一个列表数据，在父组件中需要进行新增和修改，因此我将弹框封装成了一个公共组件，以便于其他列表页进行调用，但是每个列表页显示的html会有不同，当然我们可以通过数据判断来显示不同的html，当然我们也可以使用slot来解决这种问题，当业务过于复杂时，处理方式也各有不同。

这里我把相关的业务场景测试图贴出来
父组件

如果有任何关于本文的意见，欢迎在文章下方留言，我会在看到的第一时间回复。