使用vue-cli创建手机通讯录demo(3)

先介绍一下本节的要点:vue组件和js文件结合,通过对象传参实现自定义标题和定制按钮等,动态创建和删除弹窗。

先上效果图:

1.创建vue模板文件:

2.创建js文件:


3.在List.vue中点击相应的人名时,出现弹窗,并将号码传输到弹窗的相应位置:

import mask from "./Alert.js";  //先在List.vue中引入弹窗的js

由于List.vue和弹窗并非父子关系,使用对象的方法传输很方便,耦合性也很低

demo到此结束,自己也从中收获颇丰,希望能早日熟练使用vue。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容