插槽

插槽我对他的理解就是父组件的东西插到子组件的<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>

效果如下：

链接: https://www.fly63.com/article/detial/5754