vue系列【vue中slot的使用方法】

src/view/child.vue

<template>
  <div style="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="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>