【IMWeb训练营作业】select组件

最新推荐文章于 2024-07-26 00:46:32 发布

OoTankoO

最新推荐文章于 2024-07-26 00:46:32 发布

阅读量228

点赞数

分类专栏： vue作业文章标签： vue 作业学习

本文链接：https://blog.csdn.net/OoTankoO/article/details/70370400

版权

vue作业专栏收录该内容

2 篇文章 0 订阅

订阅专栏

由于没有css样式，所以组件很丑，将就着看截图。/(ㄒoㄒ)/~~

1.html结构

<body>
    <div id="app">
        <custom-select btn="Go" :list="list1"></custom-select>
        <custom-select btn="搜索" :list="list2"></custom-select>

    </div>
    <script src="./js/select.js"></script>
</body>

2.js代码

Vue.component('custom-select', {
    template: `<div class="searchIpt clearFix">
        <div class="clearFix">
            <input type="text" class="keyWord" 
                @click="selectShow=!selectShow"
                v-model="val"> 
            <input type="button" :value="btn">
            <span></span>
        </div>
        <custom-list 
            @receive="changeValueHandle" 
            v-show="selectShow" 
            :list="list"
        ></custom-list>
    </div>`,
    props: ['btn', 'list'],
    data: function() {
        return {
            selectShow: false,
            val: ''
        };
    },
    methods: {
        changeValueHandle: function(val) {
            this.val = val;
        }
    }
});

Vue.component('custom-list', {
    template: `<ul class="list">
        <li v-for="item in list" @click="selectValueHandle(item)">{{item}}</li>
    </ul>`,
    props: ['list'],
    methods: {
        selectValueHandle: function(val) {
            this.$emit('receive', val);
        }
    }

});

var vm = new Vue({
    el: '#app',
    data: {
        list1: ['北京', '上海', '杭州'],
        list2: ['2017-4-21 10:11:31', '2017-4-22 10:11:31', '2017-4-23 10:11:31']
    }
});

老师讲的都很清晰，这里留下两个问题：

1.组件嵌套很深的时候，数据传递很麻烦。

2.兄弟组件间的通讯也比较麻烦的问题。

OoTankoO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【IMWeb训练营作业】select组件

由于没有css样式，所以组件很丑，将就着看截图。/(ㄒoㄒ)/~~1.html结构 2.js代码Vue.component('custom-select', { template: ` <input type="text" class="keyWor
复制链接

扫一扫