Vue 实现组件及组件嵌套

最新推荐文章于 2024-06-13 15:00:53 发布

hatuss

最新推荐文章于 2024-06-13 15:00:53 发布

阅读量2.3k

点赞数

分类专栏：腾讯课堂IMWeb 文章标签：腾讯课堂IMWeb html 前端

本文链接：https://blog.csdn.net/hatuss/article/details/70350657

版权

腾讯课堂IMWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果如下：

左右互不相通，公用组件。

不废话，上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件及组件嵌套</title>
    <style>
        html, body {
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .main {
            width: 90%;
            margin: 100px auto 0;
            box-sizing: border-box;
        }
        .main div {
            box-sizing: border-box;
        }
        .main-box {
            float: left;
            width: 45%;
            min-height: 260px;
            padding: 100px 0;
            border: 1px solid #999;
            background-color: #F05A10;
        }
        .main-work {
            width: 80%;
            min-height: 60px;
            margin: 0 auto;
            border-radius: 30px;
            background-color: #EDEDED;
        }
        .main-work .main-work-top {
            height: 60px;
            padding: 5px 5%;

        }
        .main-work .main-work-top input[type="text"] {
            width: 75%;
            height: 50px;
            margin: 0;
            padding: 0;
            border: 1px solid #999;
            border-radius: 25px;
            outline: none;
            box-sizing: border-box;
            background-color: #DEDEDE;
            text-indent: 1em;
            font-size: 20px;
        }
        .main-work .main-work-top button {
            width:20%;
            height: 50px;
            margin: 0;
            padding: 0;
            background-color: #FF6600;
            box-sizing: border-box;
            border-radius: 25px;
            font-size: 24px;
            line-height: 46px;
            color: #FFF;
        }
        .main-work .main-work-bottom {
            width: 100%;
            margin: 0;
            padding: 5px 5%;
            border: none;
            box-sizing: border-box;
            list-style: none;
        }
        .main-work .main-work-bottom li {
            width: 75%;
            height: 36px;
            margin: 0;
            padding: 0;
            border-radius: 18px;
            list-style: none;
            text-indent: 1em;
            font-size: 20px;
            line-height: 36px;
            color: #666;
            cursor: pointer;
        }
        .main-work .main-work-bottom li:hover {
            background-color: #FF6600;
            color: #FFF;
        }

        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .clearfix:after {
            content: ".";
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }
    </style>
    <script type='text/javascript' src='./vue.js'></script>
</head>
<body>
    <div id="app">
        <div class="main clearfix">
            <div class="main-box left">
                <main-work
                    v-bind:btn="btnOne"
                ></main-work>
            </div>
            <div class="main-box right">
                <main-work
                    v-bind:btn="btnTwo"
                ></main-work>
            </div>
        </div>
    </div>
    <script>
        Vue.component('main-work', {
            template:  `<div class="main-work">
                            <div class="main-work-top clearfix">
                                <input
                                    type="text"
                                    class="left"
                                    v-model="input"
                                    v-on:focus="showSelectListFunc"
                                >
                                <button
                                    class="right"
                                >{{btn}}</button>
                            </div>
                            <main-work-list
                                v-on:setvalue="setvalue"
                                v-bind:show="showSelectList"
                            ></main-work-list>
                        </div>`,
            props: ['btn'],
            data: function () {
                return {
                    input: '',
                    showSelectList: false
                }
            },
            methods: {
                showSelectListFunc: function () {
                    this.showSelectList = true;
                },
                hideSelectListFunc: function () {
                    this.showSelectList = false;
                },
                setvalue: function (list, show) {
                    this.input = list;
                    this.showSelectList = !show;
                }
            }
        })
        Vue.component('main-work-list', {
            template:  `<ul
                            class="main-work-bottom"
                            v-show="show"
                        >
                            <li
                                v-for="list in lists"
                                v-on:click="selectList(list)"
                            >{{list}}</li>
                        </ul>`,
            props: ['show'],
            data: function () {
                return {
                    lists: [
                        'html+css',
                        'html5+css3',
                        'javascript',
                        'angular',
                        'react',
                        'vue',
                        'jquery',
                        'oh,',
                        'fuck'
                    ]
                }
            },
            methods: {
                selectList: function (list) {
                    this.$emit('setvalue', list, this.show);

                }
            }

        })
        var app = new Vue({
            el: '#app',
            data: {
                btnOne: '查询',
                btnTwo: '搜索'
            }
        })
    </script>
</body>
</html>