Vue中slot插槽使用与理解

[Talk is cheap. Show me the code]

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

1、插槽指的是什么

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

2、代码示例

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" />
复制代码

3、业务场景

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

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

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

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