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 中的預設值；