插槽slot的基本使用

插槽的作用：
让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。

在子组件中，使用特殊的元素就可以为子组件开启一个插槽。
该插槽插入什么内容取决于父组件如何使用。

插槽的基本使用
插槽的默认值默认值
如果有多个值，同时放到组件进行替换时，一起作为替换元素

<div id="opp">
        <cpn><button>按钮</button></cpn>
        <cpn></cpn>
        <cpn></cpn>
</div>

<template id="app">
    <div>
    <h4>这是h4标签</h4>
    <p>这是p标签</p>
    //此时第一个cpn里的插槽显示的是button
    <slot></slot>
    </div>
</template>

<script src="./js/vue.js"></script>
<script>
    const opp = new Vue({
        el:'#opp',
        components:{
            cpn:{
                template:'#app',
                
            }
        }
    })
</script>