[IMWeb训练营作业]Vuejs的父子组件通信

来源：互联网发布：windows桌面文件丢失编辑：程序博客网时间：2024/06/09 01:53
说明

父组件通过传递prop:list等到子组件实现通信。
子组件通过emit事件将item传到父组件实现通信。
运行效果

Demo
这里写图片描述
核心代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Select</title>    <script src="vue.js"></script>    <style>        *{            margin:0;            padding: 0;            font-size: 12px;        }        .warp{            width: 200px;            margin: 10px;            padding: 10px;            border: 5px solid #cca0cc;            border-radius: 10px;            background: #ccbacc;        }        .keyWord{            box-sizing: content-box;            height: 16px;            padding: 2px;            /*border: 2px solid #bbb;*/            border-radius: 5px;        }        .keyBtn{            color:#fff;            background: #cca0cc;            box-sizing: content-box;            height: 16px;            padding: 2px;            /*border: 2px solid #bbb;*/            border-radius: 5px;        }        /* 子组件 */        .list li{            margin-top:5px;            display: block;            list-style: none;            text-decoration: none;            color:white;            height: 20px;            padding: 2px;            border-radius: 5px;        }        .list li:hover{            background: #cc88cc;            cursor:pointer;        }        body{            display: flex;        }    </style></head><body>    <div id="app">        <custom-select button-value="查询" v-bind:list="list1"></custom-select>    </div>    <div id="app2">        <custom-select button-value="搜索" v-bind:list="list2"></custom-select>    </div>    <script>        // var obj={selectShow:true}        // 注册component        Vue.component("custom-select",{            data:function(){                return {                    selectShow:true,inputValue:""                }            },            props:["buttonValue","list"],            methods:{                changeValueHandle:function(item){                    this.inputValue=item;                }            },            template:`<section class="warp">        <div class="searchIpt">            <div class="clearFix">                <input type="text" class="keyWord" v-bind:value="inputValue" v-on:click="selectShow=!selectShow">                <input type="button" v-bind:value="buttonValue" class="keyBtn">                <span></span>            </div>            <custom-ul v-show="!selectShow" v-bind:list="list" v-on:receive="changeValueHandle"  ></custom-ul>        </div>    </section>`        })        Vue.component("custom-ul",{            props:["list"],            template:`<ul class="list" >                        <li v-for="item in list" v-on:click="selectValueHandle(item)">{{item}}</li>            </ul>`,            methods:{                selectValueHandle:function(item){                    this.$emit("receive",item);                }            }        })        var data = {            list1:['今天的机票','明天的日程','还是睡觉吧'],            list2:['今天','明天','后天']        }        new Vue({            el:"#app",            data:data        })        new Vue({            el:"#app2",            data:data        })    </script></body></html>
0 0