【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: ["冒险岛", "赤色要塞", "夺宝奇案", "魂斗罗", "超级玛丽", "拳皇", "忍者神龟"]
        }
    });