-categories:
- vue基础
tags: - 插槽
- element ui
插槽
slot 插槽 vue内置组件 做为承载分发内容的出口
普通插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插槽使用</title>
</head>
<body>
<div id="app"></div>
<script src="./vue.js"></script>
<script>
// 全局组件
// 第一个参数是组件名，第二个参数是options
Vue.component('Vbtn', {
<!-- slot 插槽 vue内置组件 做为承载分发内容的出口 -->
template: `
<button>
<slot></slot>
</button>
`
});
//
var Header = {
data() {
return {}
},
template: `
<div>我是头部组件</div>
`
};
var Vcontent = {
data() {
return {}
},
template: `
<div>我是内容组件
<Vbtn>登录</Vbtn>
<Vbtn>注册</Vbtn>
<Vbtn>123</Vbtn>
</div>
`
};
var Slider = {
data() {
return {}
},
template: `
<div>我是侧边栏</div>
`
}
var App = new Vue({
el: '#app',
data() {
return {}
},
components: {
Header,
Vcontent,
Slider
},
template:
`
<div>
<Header></Header>
<Vcontent></Vcontent>
<Slider></Slider>
</div>
`
})
</script>
</body>
</html>
插槽 + elementUI
点击element，获取相应按钮样式的代码，写入到style中，并使用插槽调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插槽使用</title>
<style>
/* 设置默认样式*/
.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 src="./vue.js"></script>
<script>
// 全局组件
// 第一个参数是组件名，第二个参数是options
Vue.component('Vbtn', {
<!-- slot 插槽 vue内置组件 做为承载分发内容的出口 -->
template: `
<button class="default" :class="btntype">
<slot></slot>
</button>
`,
props:{
btntype:{
type:String,
},
}
});
//
var Header = {
data() {
return {}
},
template: `
<div>我是头部组件</div>
`
};
var Vcontent = {
data() {
return {}
},
template: `
<div>我是内容组件
<Vbtn btntype="primary">主要按钮</Vbtn>
<Vbtn btntype="success">成功按钮</Vbtn>
</div>
`
};
var Slider = {
data() {
return {}
},
template: `
<div>我是侧边栏</div>
`
}
var App = new Vue({
el: '#app',
data() {
return {}
},
components: {
Header,
Vcontent,
Slider
},
template:
`
<div>
<Header></Header>
<Vcontent></Vcontent>
<Slider></Slider>
</div>
`
})
</script>
</body>
</html>
插槽的多个标签应用
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
</head>
<body>
<div id="app"></div>
<script src="./vue.js"></script>
<script>
// 创建全局组件
// Vue.componnet('name',{option})
Vue.component('myLi', {
template: `
<li>
预留的第一个坑
<slot name="two"></slot>
预留的第二个坑
<slot name="three"></slot>
</li>
`
});
var App = {
template: `
<div>
<ul>
<myLi >
<h2 slot="two">我是第一个坑</h2>
<h2 slot="three">我是第二个坑</h2>
</myLi>
</ul>
</div>
`
};
new Vue({
el: '#app',
components: {
App
},
template: `<App/>`
})
</script>
</body>
</html>