vue插槽--slot

vue插槽--slot，在不少三方的UI框架里大量的使用了插槽，像如今用的比较多的饿了么的ElementUIhtml

在这里有本身写的一个组件<center></center>，组件有一个title，在使用组件的时候要求确定要显示这个title,也就是说这个title是静态的内容，和数据无关，是组件<center></center>里直接写dom结构，就必需要用插槽来正常显示，固然也能够放到属性里绑定,用v-html显示，可是不易于阅读vue

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

    <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'dom

        })
    </script>this

插槽的用处不少，具名插槽，做用域插槽，有兴趣的能够本身查阅资料，这里不讲了（懒。。）spa