vue基础之插槽

-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>