插槽的基本使用（具名插槽）

1.DialogWin.vue文件

给slot标签添加一个name属性名称

<template>
  <div>
    <div>头部</div>
    <div>主体部分
        //匿名插槽
        <slot>
            <h1>这是一个后备内容，当没有内容传入这个插槽的时候，此行才会显示</h1>
        </slot>
        //具名插槽
        <slot name="xujiang">
            <h1>具名插槽后备内容</h1>
        </slot> 
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2.App.vue

tempate标签slot指定要插入数据的插槽名称

这里有两种写法slot="xujiang"/v-slot:xujiang

<template>
  <div id="app">
    <dialog-win>
      //第一种写法
      <template slot="xujiang">
          <h1>我传入了一个具名插槽内容</h1>
      </template>
      //第二种写法
      <template v-slot:xujiang>
          <h1>我传入了一个具名插槽2</h1>
      </template>
    </dialog-win>

  </div>
</template>

<script>
import DialogWin from './components/DialogWin.vue'
export default {
  name: 'App',
  components: {
    DialogWin
  }
}
</script>

<style>
</style>

标签：基本,slot,vue,插槽,具名,DialogWin,写法
来源： https://www.cnblogs.com/ajaXJson/p/16559706.html