src/view/child.vue

<template>
  <div style="width:300px;height:50px';border:1px solid #333">
      <h3>我是子元件</h3>
      <!-- 1-2 插入slot 即展示寫入的內容 -->
      <!-- 插槽分類：
        預設插槽
        具名插槽
        作用域插槽 -->

      <!-- 2-1 預設插槽 如果父元件引入的子元件中有內容，預設插槽情況下會覆蓋本身子元件的內容 -->
      <!-- <slot>預設插槽</slot> -->

      <!-- 3
 
-1 具名插槽 -->
      <slot name="1-1"></slot>
      <slot name="1-2"></slot>
      <slot name="1-3"></slot>

      <!-- 4-1 作用域插槽 -->
      <!-- 現在我想要通過作用域插槽實現在父元件中能顯示子元件data中的jo值 -->
      <slot v-bind:str="user" name="user">
      </slot>
      <slot v-bind:str2="
 
user2" name="user2">
      </slot>
  </div>
</template>

<script>
export default {
    data(){
        return {
           user:{
               name:'張三',
               job:'籃球'
           },
           user2:{
               name:'王五',
               job:'兵乓球'
           },
        }
    }
}
 
</script>

<style>

</style>

src/view/parent.vue

<template>
  <div style="width:500px;height:100px';border:1px solid #333">
    <h1>練習vue-slot插槽---這是父元件</h1>
    <!-- 1-1 子元件想要展示在父元件中引入的子元件標籤內的內容,需要在子元件插入slot -->
    <!-- <child>我想要展示到子元件中</child> -->

    <!-- 3-2 具名插槽需要用到<template></template> 可以使用v-slot:名字或者也可以#名字 -->
    <!-- <child>
        <template #1-1>
            <p>1111111111</p>
        </template>
        <template v-slot:1-2>
            <p>222222222</p>
        </template>
        <template v-slot:1-3>
            <p>3333333333</p>
        </template>
    </child> -->


    <child>
        <!-- 單個作用域插槽 -->
        <!-- <template v-slot:default="strData">
            {{strData.str.name}}
        </template> -->

        <!-- 多個作用域插槽 -->
        <template v-slot:user="strData">
            {{strData.str.name}}
            {{strData.str.job}}
        </template>
        <template v-slot:user2="strData2">
            {{strData2.str2.name}}
            {{strData2.str2.job}}
        </template>
    </child>

  </div>
</template>

<script>
import child from './demo2'
export default {
    components:{
        child
    },
    deta(){
        return{

        }
    }

}
</script>

<style>

</style>