zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    Json对象与Json字符串互转(4种转换方式)
    Web.config配置文件详解
    jQuery BlockUI Plugin Demo 6(Options)
    jQuery BlockUI Plugin Demo 5(Simple Modal Dialog Example)
    jQuery BlockUI Plugin Demo 4(Element Blocking Examples)
    jQuery BlockUI Plugin Demo 3(Page Blocking Examples)
    jQuery BlockUI Plugin Demo 2
    <configSections> 位置引起的错误
    关于jQuery的cookies插件2.2.0版设置过期时间的说明
    jQuery插件—获取URL参数
  • 原文地址:https://www.cnblogs.com/anyux/p/12202967.html
Copyright © 2011-2022 走看看