Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <title>单个slot和具名slot</title>
</head>
​
<body>
<style>
#app{
    border: 1px solid;
    padding:10px;
    text-align: center;
}
</style>
​
<div id="app"> 
    <my-component>
        <p>我是父组件的内容</p>
    </my-component>
    <hr>
    具名插槽（有具体名字的插槽）: 视图不变，数据变
    <name-component>
        <h3 slot="header">我是标题</h3>
        <p>我是正文内容</p>
        <p>正文内容有两段</p>
        <p slot="footer">我是底部信息</p>
    </name-component>
</div>
​
<script>
var app = new Vue({
    el: '#app',
    components:{
        'my-component':{
            template:'<div>\
            <slot>\
            如果没有内容，我就默认出现\
            </slot>\
            </div>'
        },
​
        'name-component':{
            template:'<div>\
                <div class="header">\n' +
                '        <slot name="header">' + //取出name是 header 对应的内容
                '</slot>\n' +
                '    </div>\n' +
                '    \n' +
                '    <div class="container">\n' +
                '        <slot>' + // 没加 name 会把默认的取回来
                '</slot>\n' +
                '    </div>\n' +
                '\n' +
                '    <div class="footer">\n' +
                '        <slot name="footer">' + //取出name是footer对应的内容
                '</slot>\n' +
                '    </div>' +
                '</div>'
            
        },
    }
})
​
​
</script>    
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lovexwupro
0viewers