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