插槽 - 代码天地

（1）插槽内容

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

在父级组件里可以这样写

    <div class="slot_area">
        <navigation-link v-bind:url="url">
            Your Profile你的个人简介资料
        </navigation-link>
    </div>

然后在 <navigation-link> 组件模板中：

        Vue.component('navigation-link',{
            props:['url'],
            template:`<a v-bind:href="url" class="nav-link">
                        <span class="slot_span"></span>
                        <slot></slot>
                    </a>`
        });

new Vue({
el:'.slot_area',
data:{
url:'http://www.baidu.com'
}
})

当组件渲染的时候，<slot></slot> 将会被替换为“Your Profile你的个人简介资料”。

插槽内可以包含任何模板代码，包括 HTML：

        Vue.component('navigation-link',{
            props:['url'],
            template:`<a v-bind:href="url" class="nav-link">
                        <!-- 添加一个 Font Awesome 图标 -->
                        <span class="fa fa-user"></span>
                        <slot></slot>
                    </a>`
        });

插槽也可以是其他组件

    <div class="slot_area">
        <navigation-link v-bind:url="url">
            Your Profile你的个人资料简介
            <slot-component></slot-component>
        </navigation-link>
    </div>
    
    <script type="text/javascript">
        Vue.component('navigation-link',{
            props:['url'],
            template:`<a v-bind:href="url" class="nav-link">
                        <!-- 添加一个 Font Awesome 图标 -->
                        <span class="slot_span"></span>
                        <slot></slot>
                    </a>`
        });
        Vue.component('slot-component',{
            template:'<h4>插槽可以是其他模板</h4>'
        })
        new Vue({
            el:'.slot_area',
            data:{
                url:'http://www.baidu.com'
            }
        })
    </script>

结果：

注意：如果 <navigation-link> 没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。即如果模板中没有slot插槽元素，则在父级组件里加的内容都会被抛弃。

（2）编译作用域

当你想在一个插槽中使用数据时，例如：

    <!-- 2、编译作用域 -->
    <div class="scrop_area">
        <scrop-area>
            插槽显示内容，时间{{blog.date}}
        </scrop-area>
    </div>

该插槽跟模板的其它地方一样可以访问相同的实例属性 (也就是相同的“作用域”)，而不能访问 <scrop-area> 的作用域

    <div class="scrop_area">
        <scrop-area title="鼠标悬停展示信息">
            插槽显示内容，时间{{blog.date}}，title为{{title}}
        </scrop-area>
    </div>

待解答：

    <div class="scrop_area">
        <scrop-area v-bind:title="blog.title">
            插槽显示内容，时间{{blog.date}}，title为{{title}}
        </scrop-area>
    </div>
        Vue.component('scrop-area',{
            props:['blog'],
            template:`<div>
                    <span>你好</span>
                    <slot></slot>
                    </div>`
        })
        new Vue({
            el:".scrop_area",
            data:{
                blog:{
                    date:'2019.08.21',
                    title:"鼠标悬停展示信息"
                }
            }
        })

插槽

猜你喜欢