官方文件 https://cn.vuejs.org/v2/guide/components-slots.html

先上程式碼
父元件
<template>
  <div class="view-container">
    <div class="zs">
      <p>我是父元件</p>
      <HD :name="'1223'" :jk="jk" #default="user">
        <p>{{ user }}</p>
        <!-- <p>我還是預設插槽的內容</p>
        <template slot="t">
          <p>命名插槽</p>
        </template>
        <p>我是預設插槽</p>
        <template slot="number" slot-scope="jw">
          <p>哇哈哈{{ jk }}</p>
          <h1 @click="ho">{{ jw.jw }}</h1>
        </template>
        <template v-slot:hj="slotProps">
          <h2>kjkjjk</h2>
          <p>{{ slotProps }}</p>
        </template> -->
      </HD>
    </div>
  </div>
</template>

<script>
import HD from "./hd"
export default {
  data () {
    return {
      jk: '我是父元件的只'
    }
  },

  computed: {},
  beforeMount () {

  },
  mounted () { },

  methods: {
    ho () {
      console.log(jw)
      console.log('我是父元件的事件')
    }
  },
  components: {
    HD
  }
}
</script>
<style lang="scss" scoped>
@import './index';
</style>


子元件


<template>
  <div class="child">
    <!-- <h1>我是子組建{{ name }}</h1>
    <slot name="t"></slot> -->
    <slot :user="jk" />
    <!-- <slot name="number" :jw="jk" />
    <slot name="hj" v-bind:user="jk"></slot> -->
  </div>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      jk: '我是子組建的jk'
    }
  },
  watch: {

  },
  mounted () { },
  methods: {
    ho () {
      console.log('我是子元件的事件')
    },
    handleChange (value) {
      this.$emit('change', value)
    },

  }
}
</script>


<style lang="scss" scoped>
.child {
  width: 100%;
  border: 1px solid red;
}
</style>

正文

　1.預設插槽適用方式

　　　父元件

<HD >
        <p>我還是預設插槽的內容</p>
</HD>

　　子元件

<template>
  <div class="child">
    <slot />
  </div>
</template>

　　2.具名插槽

　　　　父元件 2.6之前寫法

      <HD>
        <p>我還是預設插槽的內容</p>
        <template slot="t">
          <p>命名插槽</p>
        </template>
        <p>我是預設插槽</p>
      </HD>
    

　　子元件

  <div class="child">
  <h1>我是子組建{{ name }}</h1>
    <slot name="t"></slot> 
　　<slot></slot>
  </div>

　　　2.6.0版本之後 slotslot-scope(子向父傳值)都被廢棄 同意使用v-slot

　　父元件

   <HD >
        <template v-slot:t>
          <h2>kjkjjk</h2>
          <p>{{ slotProps }}</p>
        </template> 
      </HD>

　　3.傳值

　　　向子插槽傳值就是父子元件傳值·

　　　　子向父傳值

　　　　slot-scope已經廢棄的用法

  父元件

  <template slot="number" slot-scope="jw">
          <p>哇哈哈{{ jk }}</p>
  </template>

子元件
  
<div class="child">
   <h1>我是子組建{{ name }}</h1>
    <slot name="number" :jw="jk" />
</div>

　　　最新玩法

  <HD :name="'1223'" >
        <template v-slot:hj="slotProps">
          <h2>kjkjjk</h2>
          <p>{{ slotProps }}</p>
        </template> -->
      </HD>

　簡寫

簡寫
 <HD >
        <template #hj="slotProps">
          <h2>kjkjjk</h2>
          <p>{{ slotProps }}</p>
        </template> -->
 </HD>

 <HD  >
        <template #hj="{user}">
          <h2>kjkjjk</h2>
          <p>{{ slotProps }}</p>
        </template> -->
      </HD>

重新命名
 <HD  >
        <template #hj="{user：personal}">
          <h2>kjkjjk</h2>
          <p>{{ slotProps }}</p>
        </template> -->
      </HD>

追加
 <HD  >
        <template #hj="{user：personal,name:'zs'}">
          <h2>kjkjjk</h2>
          <p>{{ slotProps }}</p>
        </template> -->
      </HD>

定義預設內容 也就是當子元件插槽沒傳值的時候
v-slot="{ user = { firstName: 'Guest' } }"

動態插槽命名
  <template v-slot:[dynamicSlotName]>
    ...
  </template>

預設插槽簡寫

當只有預設插槽  

當前元件上寫
父元件
      <HD  v-slot="user">
        <p>{{ user }}</p>
      </HD>
子元件
<div class="child">
    <slot v-bind:user="jk" />
  </div>

簡寫父元件 預設插槽 將引數寫在父元件上  必須帶上default
   <HD  #defalut="user">
        <p>{{ user }}</p>
      </HD>