vue插槽的使用方法

slot(默认插槽)

子：dialog.vue
<template>
  <div>
  	<p>默认插槽</p>
	// 注意这里放了一个默认插槽坑位
 	<slot></slot>
  </div>
</template>

父：
<template>
  <div class="slot">
    <Dialog>
      // 这里会替换到<slot></slot>的位置处
      <div class="slot-body">前端cv</div>
    </Dialog>
  </div>
</template>

name slot(具名插槽)
vue2.6.0以下版本的书写方式-------- slot=“插槽名”
vue2.6.0以上版本书写方式--------- v-slot:插槽名
vue2.6.0以上版本的书写语法糖--------- #插槽名

子：dialog.vue
<template>
  <div>
      <!-- 注意这里，没有传title属性，时候通过插槽进行内容承接 -->
      <slot name="title"></slot>
        <!-- 声明main部分 -->
       <slot name="main"></slot>
    </div>
  </div>
</template>

父：
<template>
  <div class="slot">
    <Dialog>
    //  <template slot="title">
   //    <div class="dialog-title">具名插槽</div>
   //  </template>
   //  <template v-slot:title>
   //   <div class="dialog-title">具名插槽</div>
  //  </template>
       <template #title>
        <div class="dialog-title">具名插槽</div>
      </template>
      <template v-slot:main>
        <div class="slot-body">前端cv</div>
      </template>
    </Dialog>
  </div>
</template>

scope slot(作用域插槽)
让插槽内容能够访问子组件中才有的数据是很有用的，这也是作用域插槽的意义所在
vue2.6.0以下版本的书写方式 ----- slot=“插槽名” slot-scope=“{参数}”
vue2.6.0以上版本书写方式 ----- v-slot:插槽名=“{参数}”
vue2.6.0以上版本的书写语法糖 ----- #插槽名=“{参数}”

子：
<template>
  <div>
      <!-- 注意这里，通过绑定userInfo外部可以进行使用 -->
      <slot name="title" :userInfo="userInfo"></slot>
      <slot name="main" :userInfo="userInfo"></slot>
    </div>
  </div>
</template>
<script>
	let userInfo ={
 		name:'作用域插槽子元素'
	}
</script>

父：
<template>
  <div class="slot">
    <Dialog>
      <template v-slot:main="{ userInfo }">
        <!-- 注意这里userInfo是Dialog组件内部的数据 -->
        <div>你好{{ userInfo.name }}</div>
      </template>
     //  <template #main="{ userInfo }">
     //   <!-- 注意这里userInfo是Dialog组件内部的数据 -->
     //   <div>你好{{ userInfo.name }}</div>
    //  </template>
    //  <template slot="main" slot-scope="{ userInfo }">
     //   <!-- 注意这里userInfo是Dialog组件内部的数据 -->
     //   <div>你好{{ userInfo.name }}</div>
    //  </template>
    </Dialog>
  </div>
</template>