vue2 vs vue3 插槽

前言：插槽的使用其实是很简单，你只需要明白两点：

1.插槽是使用在子组件中的。

2.插槽是为了将父组件中的子组件模板数据正常显示

vue2.0的插槽

话不多说直接上案例：

<div id="app">
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
           <span>我是插槽插入的内容</span>
        </child>
    </div>
</div>
<template id="child">
    <div class="child">
        <h3>这里是子组件</h3>
        <slot></slot>
    </div>
</template>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        components: {
            child: {
                template: '#child'
            }
        }

    });

</script>

上面的代码所展示的效果就是你会发现在 <h3>这里是子组件</h3>