slot插槽:内容分发
2019-06-02 本文已影响0人
coffee1949
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<bspanel>
<h1 slot='title'>世界，你好，</h1>
<div slot='content'>我是大坏蛋</div>
你是小仙女
</bspanel>
</div>
<script type="text/x-template" id='bspanel'>
<div>
<slot name='title'>我是标题</slot>
<slot name='content'>我是内容</slot>
<!-- slot标签中的内容是默认值，如果使用了此slot会覆盖 -->
<slot name='bottom'>我是底部</slot>
<slot></slot>
</div>
</script>
<script type="text/javascript">
var bspanel = {
template: '#bspanel',
props: []
}
var app = new Vue({
data: {
},
components: {bspanel}
}).$mount('#app')
</script>
</body>
</html>
