slot插槽(学习笔记)

Posted First·林肯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了slot插槽(学习笔记)相关的知识,希望对你有一定的参考价值。

slot插槽(有默认值,也有名称)一般情况下通过名称进行匹配
什么是插槽,有什么用?插槽相当于插入的一个东西,可以用来灵活的封装组件,比如说封装一个模态框
对组件进行内容的定制,slot插槽,一对组件标签中的结构,最终会被插入到组件的模板中去的
使用方法思路:子组件定义完成。需要灵活的改变子组件里面的东西。可以在子组件注册的标签里面写<slot></slot>来完成内容替换,当然有name来进行标识是最好的

 

案例:

  

<!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">
    <modal>
        <h1 slot="title">{{title}}</h1>
        <div slot="content">
            <p>1</p>
            <p>2</p>
            <div>我是插件的内容部分</div>
        </div>
    </modal>
</div>
</body>
<script src="vue.js"></script>
<script>
/*
    对组件进行内容的定制
		slot插槽
        一对组件标签中的结构,最终会被插入到组件的模板中
*/

Vue.component(‘modal‘,{
    data(){
        return {
            title:"modal的标题"
        }
    },
    template:`
        <div class="box">
            <div class="title">
                <slot name="title"></slot>
            </div>
            <div class="content">
                <slot name="content"></slot>
            </div>
            <div class="footer">
                我是一个底部
            </div>
        </div>
    `
})

new Vue({
    el:"#app",
    data(){
        return {
            title:‘父组件title插槽‘
        }
    }
})
</script>

<style>
.box{
    font-size:14px;
    width: 400px;
    height: 260px;
    border:2px solid #F60;
    margin:0px auto;
}
.title{
    border-bottom:1px solid #999;
}
.content{
    border-bottom:1px solid #999;
}
</style>
</html>

  

以上是关于slot插槽(学习笔记)的主要内容,如果未能解决你的问题,请参考以下文章

VUE学习笔记:12.组件化之:slot组件插槽讲解

Vue笔记:插槽(slot)

在 @html 中使用插槽

Vue第四天学习笔记之组件化高级

Vue学习笔记入门篇——组件的内容分发(slot)

vue学习指南:第九篇(详细) - Vue的 Slot-插槽