具名插槽和匿名插槽_Vue之插槽学习

【摘要】对于插槽的概念和使用，这是vue的一个难点，这需要我们静下心来，慢慢研究。

【作者】李帅印

内容：

Vue的插槽分为匿名插槽（单个插槽/默认插槽）、具名插槽、作用域插槽（带数据的插槽）。 ####匿名插槽（单个插槽/默认插槽）

下面先看看匿名插槽：

<!-- 父组件-->
<template>
//这是父组件得内容
    <div class="father">
    <h3>这里是父组件</h3>
//将父组件得内容放入到子组件中
    <chlid>
        <div class="tmp1">
            <span>Leaf 1</span>
            <span>Leaf 2</span>
            <span>Leaf 3</span>
            <span>Leaf 4</span>
            <span>Leaf 5</span>
        </div>
    </child>
    </div>
</template>
<script>
//再父组件中引入子组件
import Child from '@/components/child'
export default {
    components:{
        child:child
    }
}
</script>
复制代码
<!--子组件-->
//子组件直接引用匿名插槽，可以将父组件要显示得内容给展示到子组件中
<template>
    <div>
        <slot></slot>
        <h2>child子组件部分</h2>
    </div>
</template>