【IMWeb训练营作业】组件间通讯

来源：互联网发布：php mysql支持编辑：程序博客网时间：2024/06/08 03:55

1.目录结构

2. HTML 基础骨架以及自定义标签的使用

<div id="app"><div style="float: left;"><h2>自定义下拉框</h2><!-- 自定义标签 （使用组件）--><custom-select but-value="查询" :lists="list1"></custom-select></div><div style="float: left;"><h2>自定义下拉框2</h2><!-- 使用  v-bind：来动态的绑定数据并通过自定义属性向子组件传递数据 --><custom-select but-value="搜索" :lists="list2"></custom-select></div></div>

3.Vue 全局组件注册（封装在 main.js 中）

Vue.component("custom-select", {//全局注册一个组件data:function(){//返回各自的数据对象return {selectShow:false,val:"",};},props:["butValue", "lists"],template:`<section class="warp"><div class="searchIpt clearFix"><div class="clearFix"><input type="text" class="keyWord" @click="selectShow = !selectShow" :value="val" /><input type="button" :value="butValue"><span></span></div><custom-list v-show="selectShow" :lists="lists" v-on:receive="changeValue" ></custom-list></div></section>`,methods:{changeValue(value){this.val = value;this.selectShow = false;}}});//将 ul 标签单独分离出来，降低其父组件的耦合性Vue.component("custom-list", {props:["lists"],template:`<ul class="list"><li v-for="item of lists" @click="selectValueHandle(item)">{{item}}</li></ul>`,methods:{//通过子组件的点击事件向父组件传递数据，子组件 ---> 父组件//告诉父组件需要改变val的值需要触发一个自定义事件selectValueHandle:function(item){this.$emit("receive", item);}}});

4. 效果图

0 0