vue插槽slot和slotscope

插槽

插槽我对他的理解就是父组件的东西插到子组件的 <slot></slot> 里面，也不知道这样理解对不对，方便自己记忆

普通插槽

---

父组件如下：

<template>
    <div class="father">
        <h3> 这里是父组件 </h3>
        <child>
            <div>
              <span> 这是父组件插到子组件的 slot 标签 </span>
              <span> 这是父组件插到子组件的 slot 标签 </span>
              <span> 这是父组件插到子组件的 slot 标签 </span>
            </div>
        </child>
    </div>
</template>

<script>
import child from './children'
export default {
    components: {child}
}
</script>

子组件如下：

<template>
    <div>
        <h3> 这里是子组件, 父组件的 child 将会插到 slot 标签里面 </h3>
        <slot></slot>
    </div>
</template>

<script>
export default {

}
</script>

显示效果如下：

具名插槽

---

父组件

<template>
    <div class="father">
        <h3> 这里是父组件 </h3>
        <child>
            <div>
                <p> 这不是具名插槽 </p>
                <p> 这不是具名插槽 </p>
                <p> 这不是具名插槽 </p>
            </div>
            <div slot="havename">
              <p> 这是具名插槽 </p>
              <p> 这是具名插槽 </p>
              <p> 这是具名插槽 </p>
            </div>
        </child>
    </div>
</template>

<script>
import child from './children'
export default {
    components: {child}
}
</script>

子组件

<template>
    <div>
        <h3> 这里是子组件, 父组件的 child 将会查到下面 </h3>
        <slot name="havename"></slot>
        <slot></slot>
    </div>
</template>

<script>
export default {
}
</script>

效果如下：

作用域插槽

---

我对他的理解就是数据在子组件里面，父组件可以用

父组件

<template>
    <div class="father">
        <h3> 这里是父组件 </h3>
        <child>
            <div>
                <p> 这不是具名插槽 </p>
                <p> 这不是具名插槽 </p>
                <p> 这不是具名插槽 </p>
            </div>
            <div slot="havename">
              <p> 这是具名插槽 </p>
              <p> 这是具名插槽 </p>
              <p> 这是具名插槽 </p>
            </div>
            <template slot-scope="fromchildData">
                <p v-for="(item,index) of fromchildData.data" :key="index">{{item}}</p>
            </template>
        </child>
    </div>
</template>

<script>
import child from './children'
export default {
    components: {child}
}
</script>

子组件

<template>
    <div>
        <h3> 这里是子组件, 父组件的 child 将会查到下面 </h3>
        <slot name="havename"></slot>
        <slot></slot>
        <slot :data="childData"></slot>
    </div>
</template>

<script>
export default {data() {
        return {childData:[1,2,3,4,5]
        }
    },
}
</script>

效果如下：