slot 插槽
<!--
* @Author: your name
* @Date: 2020-04-01 14:15:10
* @LastEditTime: 2020-04-01 14:32:29
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \x\08.html
-->
<!-- Vue 數據驅動視圖 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.default {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
.primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.success {
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 全局組件的創建
// 第一個是組件名，第二個是配置選項
Vue.component('Vbtn', {
// 插槽！！！內置全局組件
// slot 承載分發內容的出口
template: '\
<button class="default" :class="type">\
<slot>\
btn\
</slot>\
</button>',
props: ['type']
})
var Vheader = {
template: '\
<div>head<Vbtn /></div>\
'
}
var Vaside = {
template: '\
<div>aside</div>\
'
}
var Vcontent = {
template: '\
<div>\
content\
<Vbtn type="primary">main</Vbtn>\
<Vbtn type="success">success</Vbtn>\
</div>\
'
}
// 局部組件
var App = {
data() {
return {
}
},
methods: {
clickButton(e) {
console.log(this)
}
},
components: {
Vheader,
Vaside,
Vcontent
},
template: '<div><Vheader />\
<div><Vaside /></div>\
<div><Vcontent /></div>\
</div>'
};
console.log(App)
var vm = new Vue({
el: "#app",
data() {
return {
}
},
// 掛載子組件
components: {
App
},
// 父組件可以直接使用
template: '\
<App></App>\
'
});
console.log(vm)
</script>
</body>
</html>
具名插槽 slot name=’’
<!--
* @Author: your name
* @Date: 2020-04-01 16:16:50
* @LastEditTime: 2020-04-01 16:30:08
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \x\09.html
-->
<!-- Vue 數據驅動視圖 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('myLi', {
template: '\
<li>\
first - re\
<slot name="two"></slot>\
three -re\
<slot name="three"></slot>\
</li>\
'
})
// 局部組件
var App = {
data() {
return {
}
},
methods: {},
components: {
},
template: '\
<div>\
<ul>\
<li>\
<myLi>\
<h2 slot="two">first</h2>\
<h3 slot="three">three</h3>\
</myLi>\
</li>\
</ul>\
</div>'
};
console.log(App)
var vm = new Vue({
el: "#app",
data() {
return {
}
},
// 掛載子組件
components: {
App
},
// 父組件可以直接使用
template: '\
<App></App>\
'
});
console.log(vm)
</script>
</body>
</html>