Vue组件插槽的基本用法(匿名插槽)

组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力

1、插槽位置

/*
    组件插槽：父组件向子组件传递内容
*/
Vue.component('alert-box',{
    template:`
        <div class="demo-alert-box"></div>
            <strong>Error!</strong>
            <slot>默认内容</slot>//插槽的位置
        </div>
    `
})

2、插槽内容

<alert-box>Someting bad happend.</alert-box>

注：父组件的内容“Someting bad happend”，将会渲染到插槽的位置，覆盖掉插槽的默认内容；如果父组件不传值， 则使用 slot 中的默认值；