vue learning 19: using slots

Slot usage scenarios:

In the child component, a piece of content is displayed, and this piece of content is not determined by the child component, but by the parent component.

<div id="app">
        <bcontent>
            <p>I am Slot</p>
        </bcontent>
    </div>
    <script>
        var bcontent = {
            template:  `<div>
                            i am slot
                            <slot></slot>
                        </div>`
        }
        var app = new Vue ({
            el: '#app',
            components: {
                bcontent
            }
        })

2. Named slots: when the parent component passes multiple slots

3. Scope slot