Vue列表组件与弹窗组件示例

列表组件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none
        }

        body {
            height: 2000px;
            overflow: hidden;
        }

        .header {
            width: 100%;
            height: 40px;
            background: #e1e1e1;
            text-align: center;
            line-height: 40px;
            position: fixed;
        }

        .header button {
            padding: 0rem 0.2rem;
            height: 40px;
            top: 0;
        }

        .header button:nth-of-type(1) {
            position: fixed;
            left: 0;
        }

        .header button:nth-of-type(2) {
            position: fixed;
            right: 0;
        }

        .content {
            position: fixed;
            top: 40px;
            overflow: auto;
            width: 100%;
            height: 100%;
        }

        .content .user_list h3 {
            background: #eeeeee;
            padding-left: 0.5rem;
            height: 2rem;
            line-height: 2rem;
        }

        .content .user_list ul li {
            height: 2.5rem;
            line-height: 2.5rem;
            border-bottom: .01rem #e1e1e1 solid;
            padding-left: 0.5rem
        }

        .user_list span:nth-of-type(2) {
            float: right;
            padding-right: 1rem
        }

        .content .user_index {
            position: fixed;
            right: 0.6rem;
            top: 50%;
            font-size: 1rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <custom-header :title="title">
            <button slot="left">返回</button>
        </custom-header>
        <custom-content :user-data="userData"></custom-content>
    </div>

    <template id="header">
        <div class="header">
            <slot name="left"></slot>
            <span>{{title}}</span>
            <slot name="right"></slot>
        </div>
    </template>
    <template id="list-content">
            <div class="content">
                    <ul class="user_list">
                        <li v-for="item in userData">
                            <h3>{{item.index}}</h3>
                            <ul>
                                <li v-for="user in item.users">
                                    <span>{{user.name}}</span>
                                    <span>{{user.tel}}</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="user_index" ref="user_index">
                        <li @click="setScroll" v-for="index in userIndex">{{index}}</li>
                    </ul>
                </div>
    </template>

    <script>
        // document.getElementById("").style.marginTop
        var userData = [{
            "index": "A",
            "users": [{
                "name": "a1",
                "tel": "123453221122"
            }, {
                "name": "a2",
                "tel": "123453221122"
            }, {
                "name": "a3",
                "tel": "123453221122"
            }]
        }, {
            "index": "B",
            "users": [{
                "name": "b1",
                "tel": "123453221122"
            }, {
                "name": "b2",
                "tel": "123453221122"
            }, {
                "name": "b3",
                "tel": "123453221122"
            }]
        }, {
            "index": "C",
            "users": [{
                "name": "c1",
                "tel": "123453221122"
            }, {
                "name": "c2",
                "tel": "123453221122"
            }, {
                "name": "c3",
                "tel": "123453221122"
            }]
        }, {
            "index": "D",
            "users": [{
                "name": "d1",
                "tel": "123453221122"
            }, {
                "name": "d2",
                "tel": "123453221122"
            }, {
                "name": "d3",
                "tel": "123453221122"
            }]
        }]
        Vue.component("custom-header", {
            template: ‘#header‘,
            props: ["title"]
        });
        Vue.component("custom-content", {
            template: "#list-content",
            props: ["userData"],
            computed: {
                userIndex: function() {
                    return this.filterIndex(this.userData);
                }
            },
            methods: {
                filterIndex: function(data) {
                    var result = [];
                    for (const i in data) {
                        if (data.hasOwnProperty(i)) {
                            const element = data[i];
                            result.push(element.index);
                        }
                    }
                    return result;
                },
                setListIndexPos: function() {
                    debugger
                    //获取索引元素
                    var element = this.$refs.user_index;
                    //获取offsetHight
                    var iH = element.offsetHeight;
                    element.style.marginTop = -iH / 2 + ‘px‘;
                },
                setScroll: function() {

                }
            },
            mounted() {
                this.setListIndexPos();
            },

        });
        //多插槽的使用，则使用name属性来指定要插入的位置
        var vm = new Vue({
            el: ‘#app‘,
            data: {
                title: "通讯录",
                userData: userData
            },
            components: {

            }
        });
    </script>

</body>

</html>

弹窗组件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none
        }

        body {
            height: 2000px;
            overflow: hidden;
        }

        .header {
            width: 100%;
            height: 40px;
            background: #e1e1e1;
            text-align: center;
            line-height: 40px;
            position: fixed;
        }

        .header button {
            padding: 0rem 0.2rem;
            height: 40px;
            top: 0;
        }

        .header button:nth-of-type(1) {
            position: fixed;
            left: 0;
        }

        .header button:nth-of-type(2) {
            position: fixed;
            right: 0;
        }

        .content {
            position: fixed;
            top: 40px;
            overflow: auto;
            width: 100%;
            height: 100%;
        }

        .content .user_list h3 {
            background: #eeeeee;
            padding-left: 0.5rem;
            height: 2rem;
            line-height: 2rem;
        }

        .content .user_list ul li {
            height: 2.5rem;
            line-height: 2.5rem;
            border-bottom: .01rem #e1e1e1 solid;
            padding-left: 0.5rem
        }

        .user_list span:nth-of-type(2) {
            float: right;
            padding-right: 1rem
        }

        .content .user_index {
            position: fixed;
            right: 0.6rem;
            top: 50%;
            font-size: 1rem;
        }

        .message {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 5);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 200;
            display: flex;
        }

        .message .message-main {
            width: 200px;
            height: 150px;
            background: white;
            border-radius: 0.15rem;
            margin: auto;
            position: relative;
        }

        .message .message-title {
            padding: 0.1rem;
            border-bottom: 0.01rem solid #ccc;
        }

        .message .message-content {
            height: 2.5rem;
            line-height: 2.5rem;
            text-align: center;
        }

        .message .message-btn {
            position: absolute;
            right: 0;
            bottom: 0;
        }

        .message .message-btn button {
            margin: 1rem;
            padding: 0.1rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <custom-header :title="title">
            <button slot="left">返回</button>
        </custom-header>
        <custom-content :user-data="userData"></custom-content>
        <div class="message">
            <div class="message-main">
                <div class="message-title">xxxx</div>
                <div class="message-content">sssss</div>
                <div class="message-btn">
                    <button>确认</button>
                    <button>取消</button>
                </div>
            </div>
        </div>
    </div>

    <template id="header">
        <div class="header">
            <slot name="left"></slot>
            <span>{{title}}</span>
            <slot name="right"></slot>
        </div>
    </template>
    <template id="list-content">
            <div class="content">
                    <ul class="user_list">
                        <li v-for="item in userData">
                            <h3>{{item.index}}</h3>
                            <ul>
                                <li v-for="user in item.users">
                                    <span>{{user.name}}</span>
                                    <span>{{user.tel}}</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="user_index" ref="user_index">
                        <li @click="setScroll" v-for="index in userIndex">{{index}}</li>
                    </ul>
                </div>
    </template>

    <script>
        // document.getElementById("").style.marginTop
        var userData = [{
            "index": "A",
            "users": [{
                "name": "a1",
                "tel": "123453221122"
            }, {
                "name": "a2",
                "tel": "123453221122"
            }, {
                "name": "a3",
                "tel": "123453221122"
            }]
        }, {
            "index": "B",
            "users": [{
                "name": "b1",
                "tel": "123453221122"
            }, {
                "name": "b2",
                "tel": "123453221122"
            }, {
                "name": "b3",
                "tel": "123453221122"
            }]
        }, {
            "index": "C",
            "users": [{
                "name": "c1",
                "tel": "123453221122"
            }, {
                "name": "c2",
                "tel": "123453221122"
            }, {
                "name": "c3",
                "tel": "123453221122"
            }]
        }, {
            "index": "D",
            "users": [{
                "name": "d1",
                "tel": "123453221122"
            }, {
                "name": "d2",
                "tel": "123453221122"
            }, {
                "name": "d3",
                "tel": "123453221122"
            }]
        }]
        Vue.component("custom-header", {
            template: ‘#header‘,
            props: ["title"]
        });
        Vue.component("custom-content", {
            template: "#list-content",
            props: ["userData"],
            computed: {
                userIndex: function() {
                    return this.filterIndex(this.userData);
                }
            },
            methods: {
                filterIndex: function(data) {
                    var result = [];
                    for (const i in data) {
                        if (data.hasOwnProperty(i)) {
                            const element = data[i];
                            result.push(element.index);
                        }
                    }
                    return result;
                },
                setListIndexPos: function() {
                    debugger
                    //获取索引元素
                    var element = this.$refs.user_index;
                    //获取offsetHight
                    var iH = element.offsetHeight;
                    element.style.marginTop = -iH / 2 + ‘px‘;
                },
                setScroll: function() {

                }
            },
            mounted() {
                this.setListIndexPos();
            },

        });
        //多插槽的使用，则使用name属性来指定要插入的位置
        var vm = new Vue({
            el: ‘#app‘,
            data: {
                title: "通讯录",
                userData: userData
            },
            components: {

            }
        });
    </script>

</body>

</html>

弹窗组件示例二

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../../Script/vue/vue.js"></script>
    <style>
        /** 弹窗动画*/

        .drop-enter-active {
            /* 动画进入过程：0.5s */
            transition: all 0.5s ease;
        }

        .drop-leave-active {
            /* 动画离开过程：0.5s */
            transition: all 0.3s ease;
        }

        .drop-enter {
            /* 动画之前的位置 */
            transform: translateY(-500px);
        }

        .drop-leave-active {
            /* 动画之后的位置 */
            transform: translateY(-500px);
        }
        /* 最外层 设置position定位 */

        .message {
            position: relative;
            font-size: 1rem;
        }
        /* 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩 */

        .message-cover {
            position: fixed;
            z-index: 200;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        /* 内容层 z-index要比遮罩大，否则会被遮盖 */

        .message-content {
            position: fixed;
            top: 35%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 300;
        }

        .message-header {
            /*  头部title的背景 居中圆角等属性。
             没有图片就把background-image注释掉 */
            /* background-image: url("../../static/gulpMin/image/dialog/dialog_head.png"); */
            width: 86.5%;
            height: 43px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .message-main {
            /* 主体内容样式设置 */
            background: #ffffff;
            display: flex;
            justify-content: center;
            align-content: center;
            width: 86.5%;
            padding: 22px 0 47px 0;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .message-foot-close {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: #fcca03;
            display: flex;
            justify-content: center;
            align-content: center;
            margin-top: -25px;
        }

        .close_img {
            /* background-image: url("../../static/gulpMin/image/dialog/dialog_close.png"); */
            width: 42px;
            height: 42px;
        }

        .message-header div {
            background: #fcca03;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 43px;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="dialogContent">弹窗</button>
        <message-dialog :is-show="isShow" @on-close="close" v-show="isShow" :width="100">
            <div slot="header">{{message}}</div>
            <div slot="main">{{content}}</div>
        </message-dialog>
    </div>

    <!-- 消息弹出窗 -->
    <template id="message-dialog">
            <div class="message">
                    <!--外层的遮罩 点击事件用来关闭弹窗，isShow控制弹窗显示 隐藏的props-->
                    <div class="message-cover back" v-if="isShow"></div>
                    <!-- transition 这里可以加一些简单的动画效果 -->
                    <transition name="drop">
                        <div class="message-content" :style="{width:width+‘%‘,top:topDistance+‘%‘}" v-if="isShow">
                            <!--弹窗头部 title-->
                            <div class="message-header">
                                <slot name="header"></slot>
                            </div>
                            <!--弹窗的内容-->
                            <div class="message-main" :style="{paddingTop:padingTop+‘px‘,paddingBottom:padingBottom+‘px‘}">
                                    <slot name="main"></slot>
                            </div>
                            <!--弹窗关闭按钮-->
                            <div class="message-foot-close" @click="close">
                                <div class="message-close-img back" ></div>
                            </div>
                        </div>
                    </transition>
                </div>
    </template>
    <script>
        Vue.component("message-dialog", {
            template: "#message-dialog",
            props: {
                isShow: {
                    type: Boolean,
                    required: true,
                    default: false,
                },
                width: {
                    type: Number,
                    default: 86.5
                },
                topDistance: {
                    type: Number,
                    default: 35
                },
                padingTop: {
                    type: Number,
                    default: 22
                },
                padingBottom: {
                    type: Number,
                    default: 47
                }
            },
            methods: {
                close: function() {
                    this.$emit(‘on-close‘);
                }
            }
        });

        var vm = new Vue({
            el: ‘#app‘,
            data: {
                isShow: false,
                message: "提示信息",
                content: "内容"
            },
            methods: {
                dialogContent: function() {
                    this.isShow = !this.isShow;
                },
                close: function() {
                    this.isShow = false;
                }
            }
        });
    </script>
</body>

</html>

弹窗组件示例三

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../../Script/vue/vue.js"></script>
    <link rel="stylesheet" href="message-dialog.1.css">
    <script src="message-dialog.js"></script>
</head>

<body>
    <div id="app">
        <button @click="dialogContent">弹窗</button>
        <message-dialog :width="99" :is-show="isShow" v-show="isShow">
            <div slot="message_header">{{message}}</div>
            <div slot="message_content">{{content}}</div>
            <!-- <div class="message-dialog-btn" slot="message_btn">
                <button type="button" @click="sure">确定</button>
                <button type="button" @click="cancel">取消</button>
            </div> -->
            <div class="message-dialog-close-img" slot="message_close" @click="cancel">×</div>
        </message-dialog>
    </div>

    <script>
        var vm = new Vue({
            el: ‘#app‘,
            data: {
                isShow: false,
                message: "提示信息",
                content: "内容"
            },
            methods: {
                dialogContent: function() {
                    this.isShow = !this.isShow;
                },
                close: function() {
                    this.isShow = false;
                },
                sure: function() {
                    alert(1234);
                    this.isShow = !this.isShow;
                },
                cancel: function() {
                    this.isShow = !this.isShow;
                }
            }
        });
    </script>
</body>

</html>

/** 弹窗动画*/

.drop-enter-active {
    /* 动画进入过程：0.5s */
    transition: all 0.5s ease;
}

.drop-leave-active {
    /* 动画离开过程：0.5s */
    transition: all 0.3s ease;
}

.drop-enter {
    /* 动画之前的位置 */
    transform: translateY(-500px);
}

.drop-leave-active {
    /* 动画之后的位置 */
    transform: translateY(-500px);
}

/* 最外层 设置position定位 */

.message-dialog {
    position: relative;
    font-size: 1rem;
}

/* 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩 */

.message-dialog-cover {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* 内容层 z-index要比遮罩大，否则会被遮盖 */

.message-dialog-content {
    position: fixed;
    top: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 300;
    left: 0;
    right: 0;
}

.message-dialog-header {
    /*  头部title的背景 居中圆角等属性。
     没有图片就把background-image注释掉 */
    /* background-image: url("../../static/gulpMin/image/dialog/dialog_head.png"); */
    width: 86.5%;
    height: 43px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #fcca03;
}

.message-dialog-main {
    /* 主体内容样式设置 */
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    width: 86.5%;
    padding: 22px 0 47px 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.message-dialog-footer {
    width: 86.5%;
    height: 45px;
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
    align-items: center;
}

.message-dialog-close-img {
    /* background-image: url("../../static/gulpMin/image/dialog/dialog_close.png"); */
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50%;
    background: #fcca03;
    margin-top: -45px;
}

.message-dialog-btn {
    width: 100%;
    height: 100%;
    top: -8px;
    background: #fcca03;
    position: relative;
    line-height: 45px;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    align-content: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.message-dialog-btn button {
    border-radius: 0.2rem;
    background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%);
    box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, .2);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
    color: #fbfbfb;
    font-weight: bold;
    font-family: ‘Open Sans‘, sans-serif;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    margin: 10px;
    height: 30px;
    line-height: 30px;
}

button:active {
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, .2);
    top: 1px;
}

button:after {
    content: "";
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    opacity: 0.6;
    right: 0;
    top: 0;
    border-radius: 0 5px 5px 0;
}

Vue.component("message-dialog", {
    template: `<div class="message-dialog">
                <!-- 遮罩 -->
                <div class="message-dialog-cover"></div>
                <transition name="drop">
                    <div class="message-dialog-content" v-bind:style="{width:width+‘%‘,top:topDistance+‘%‘}" v-if="isShow">
                        <div class="message-dialog-header">
                             <!-- 使用插槽 -->
                            <slot name="message_header"></slot>
                        </div>
                        <div class="message-dialog-main">
                        <slot name="message_content"></slot>
                        </div>
                        <div class="message-dialog-footer">
                        <slot name="message_btn"></slot>
                        <slot name="message_close"></slot>
                        <!-- <div class="message-dialog-btn">
                                 <button type="button">确定</button>
                                 <button type="button">取消</button>
                             </div>
                         <div class="message-dialog-close-img">×</div> -->
                        </div>
                    </div>
                </transition>
            </div>`,
    data: function() { return {}; },
    props: {
        width: {
            type: Number,
            default: 86.5
        },
        topDistance: {
            type: Number,
            default: 35
        },
        isShow: {
            type: Boolean,
            default: false
        }
    },
    methods: {

    },
})

原文地址：https://www.cnblogs.com/donlyluik/p/9834079.html

时间： 2024-11-02 22:03:49

Vue列表组件与弹窗组件示例的相关文章

vue + elementui 中的弹窗组件封装成公共组件

如果一个弹窗比较简单,可以直接放在页面中,通过visible属性的true,false控制显示隐藏就可以了,我们今天要说的是将个比较复杂的弹窗组件封装成全局组件,然后可以在项目中的任何一个页面引用~~下面走起 1.首先要注册个全局组件,用下面的全局API Vue.component('my-component', { /* ... */ }) 在js文件中首先引入这个弹窗组件,组件名称是iesPersonRadioDialog,项目中会引入一个js文件,这个js文件中在分别引入其他的js,模块

vue+element table的弹窗组件

在处理表格编辑相关的需求,是需要做一个弹框进行保存的:或者查看表格数据的详细信息时,也是需要做弹窗: 当然 ,这是类似于这样的 ,当然 element 已经帮我们做好弹窗这一块主要我想记录的是将弹窗做为组件,并且如果弹窗部分有请求部分的话,就到弹窗组件内部处理,相对于说解耦吧也有子组件改变父组件传过来的值表格部分,也就是主要显示地方 <template> <div class="myComponent"> <el-table :data=

Vue电商后台管理系统项目第6篇-商品管理的商品列表和商品添加组件实现

开胃小菜—左侧导航菜单的动态生成通过为指定的用户指定角色,那么这个用户登陆之后应该只能看到这个角色所对应的权限菜单, 我们是根据当前登陆用户去获取对应的菜单权限步骤分析接口文档 ,发现不用传递参数,因为它是根据当前登陆用户的token来动态获取当前用户的权限添加接口方法获取动态的菜单数据 // 获取左侧菜单权限 export const getLeftMenu = () => { return axios({ url: `menus` }) } 实现菜单项的动态加载获取数据之后,注意看

VUE 父组件调用子组件弹窗

想搞一个新增编辑弹窗,和列表页面分开先来一个父组件调用子组件弹窗的demo 父组件 <template> <div> <el-button @click="show">按钮</el-button>  <add-or-update :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOr

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

vue学习笔记の实现select组件

通过腾讯训练营这几天的学习,初步实现了自定义的选择下拉框组件,其中,可以把下拉选项抽离出来作为子组件,整个组件为父组件,其主要由<div>.<input>.<custom-select>.<ul>.<li>等标签构成基本的选择组件页面结构.主要的功能项:输入框及button按钮,构成初次展现的页面,通过点击输入框按钮,下拉列表选择项出现,当点击选择项中的某一项内容时,输入框中会出现相应的内容,再点击输入框,下拉选择项列表隐藏.同时,通过父组件与子

Vue学习笔记入门篇——组件的通讯

本文为转载,原文:Vue学习笔记入门篇--组件的通讯组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B.它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的.这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递

谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo

前言前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ...... 每个频道有独立的团队去维护这些代码,具体到某一个频道的话有会由数十个不等的页面组成,在各个页面开发过程中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件. 而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的

vue.js 组件-全局组件和局部组件

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <!DOCTYPE html> <html> <body> <div id="app">  <my-component></my-compo