vue插槽--slot

vue插槽--slot，在不少三方的UI框架裏大量的使用了插槽，像如今用的比較多的餓了麼的ElementUI

在這裏有本身寫的一個組件<center></center>，組件有一個title，在使用組件的時候要求確定要顯示這個title,也就是說這個title是靜態的內容，和數據無關，是組件<center></center>裏直接寫dom結構，就必需要用插槽來正常顯示，固然也能夠放到屬性裏綁定,用v-html顯示，可是不易於閱讀

    <div id="app">
        <div class="container">
            <center class="center-box">
                <h1>this is a title</h1>
            </center>
        </div>
    </div>

    <script>
        Vue.component('center',{
            data() {
                return {
                    text: 'this is you component context.'
                }
            },
            template: `<div>
                            <slot></slot> //至關於<h1>this is a title</h1>
                            <div>{{text}}</div>
                        </div>`
        })

        //根實例
        var vm = new Vue({
            el: '#app'

        })
    </script>

 

插槽的用處不少，具名插槽，做用域插槽，有興趣的能夠本身查閱資料，這裏不講了（懶。。）