【IMWeb训练营作业】Vue组件

【IMWeb训练营作业】Vue组件

效果图

DOM结构

<div id="app">
    <div style="float: left">
        <search-bar btn-value="查询" :list="movies"></search-bar>
    </div>
    <div style="float: left">
        <search-bar btn-value="搜索" :list="games"></search-bar>
    </div>
</div>

自定义组件

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

    //自定义列表组件
    Vue.component('custom-list', {
        props: ["list", "val"],
        template: '<div><ul class="list"><li v-for="(item,index) of list" @click="selectValueHandle(item,index)">{{item}}</li></ul></div>',
        methods: {
            //子组件向父组件通信，传递数据
            selectValueHandle: function (item, index) {
                this.$emit("receive", item, index);
            }
        }
    });

    new Vue({
        el: "#app",
        data: {
            movies: ['肖申克的救赎', '这个杀手不太冷', '霸王别姬', '阿甘正传 ', '美丽人生 ', '千与千寻', '辛德勒的名单', '泰坦尼克号'],
            games: ["冒险岛", "赤色要塞", "夺宝奇案", "魂斗罗", "超级玛丽", "拳皇", "忍者神龟"]
        }
    });