美文网首页
vue学习笔记--插槽、具名插槽和作用域插槽

vue学习笔记--插槽、具名插槽和作用域插槽

作者: 小棋子js | 来源:发表于2019-12-24 11:35 被阅读0次

    插槽使用场景是:slot(插槽)可以理解为占位符

    如果子组件需要显示的内容并非来自本身,而是父组件传递进来的,而假如直接这样写,是不可以实现的,因为如果me-component没有包含一个 <slot> 元素,则任何传入它的内容都会被抛弃:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <me-component>
                <h1>我是header</h1>  
            </me-component>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script> 
        // 插槽
        Vue.component('me-component', {         
            template:
                    `<div>
                        <p>你好</p>
                    </div>`
        })
        new Vue({
            el: '#app'
        }) 
    </script>
    </body>
    </html>
    

    要实现上面的使用场景,可以利用插槽:

     <div id="app">
            <me-component>
                <h1>我是header</h1>  
            </me-component>
        </div>
    <script >
        Vue.component('me-component', {         
            template:
                    `<div>
                        <p>你好</p>
                        <slot></slot> 
                    </div>`
        })
        var vm = new Vue({
            el:"#app"
        })
    </script >
    
    

    但是,假如使用多个插槽的时候,就需要用具名插槽

     <div id="app">
            <me-component>
                <h1 slot="header">我是header</h1>  
                <h1 slot="footer">我是footerr</h1>
            </me-component>
        </div>
    <script >
        Vue.component('me-component', {         
            template:
                    `<div>
                        <p>你好</p>
                        <slot name="header"></slot> 
                        <slot name="footer"></slot> 
                    </div>`
        })
        var vm = new Vue({
            el:"#app"
        })
    
    

    另外slot 插槽还可以定义默认值,如果父组件没有对应的插槽标签,那么dom上显示的是<slot ></slot> 标签里的内容

    相关文章

      网友评论

          本文标题:vue学习笔记--插槽、具名插槽和作用域插槽

          本文链接:https://www.haomeiwen.com/subject/zwbxoctx.html