vue中自定义组件的用法（企业微信通讯录选人）

组件的好处就是可以重复使用，坏处就是父子组件之间的通信相对比较麻烦，但是掌握了父子组件之间的通信后组件的应用就很简单了。下面是实战，最后是思路。

项目的index.html中引入https://res.wx.qq.com/open/js/jweixin-1.2.0.js">

1.子组件

<template><div class="add-photo-con"><div class="photo-icon-con" :key="item.id" v-for="item in selectedUserList"><div class="del-phone-icon"><img class="" style="height: 100%;width: 100%;" @click="delPic(item.id)" src="../assets/images/m-del-red.png"></div><div class="add-photo-icon1"><img class="add-photo-icon1" v-if="item.avatar" :src="item.avatar"><img class="add-photo-icon1" v-else src="../assets/images/m-head-sculpture-default.png"></div></div><img @click="selectMeetingUsers" class="add-photo-icon" src="../assets/images/m-add-photo.png"></div>
</template>

<style scoped>.add-photo-icon {width: 30px;height: 30px;margin-right: 10px;}.add-photo-icon1 {width: 45px;height: 45px;border-radius: 3px;}.del-phone-icon{height: 12px;width: 12px;margin-left: 38px;margin-bottom: -5px;z-index: 10;}.photo-icon-con{width: 45px;height: 45px;margin-right: 10px;margin-bottom: 10px;display: flex;flex-direction: column;}.add-photo-con {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: center;padding-left: 10px;padding-top: 10px;}.textarea-title {font-size: 14px;font-family: "Microsoft YaHei";font-weight: 500;color: #434343;line-height: 28px;}.textarea-title:before {content: "* ";color: #FF0000;}.textarea-con {display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;background: #ffffff;padding: 5px 10px;border-bottom: 1px solid #f2f2f2;}
</style>

<script>export default {name: 'selectComponents',props:{name: {type: String}},data() {return {selectedUserList: [],selectedUserIds: [],}},methods: {getpeopleArrList(val){this.selectedUserList = valthis.getSelectedUserIds();},delPic(id){for(let i=0; i<this.selectedUserList.length; i++){if(this.selectedUserList[i].id == id){this.selectedUserList.splice(i, 1);}}this.getSelectedUserIds();this.invokeEmit();},selectMeetingUsers () {var that = this;wx.invoke("selectEnterpriseContact", {"fromDepartmentId": -1,// 必填，表示打开的通讯录从指定的部门开始展示，-1表示自己所在部门开始, 0表示从最上层开始"mode": "multi",// 必填，选择模式，single表示单选，multi表示多选"type": ["department", "user"],// 必填，选择限制类型，指定department、user中的一个或者多个"selectedDepartmentIds": [],// 非必填，已选部门ID列表。用于多次选人时可重入，single模式下请勿填入多个id"selectedUserIds": that.selectedUserIds // 非必填，已选用户ID列表。用于多次选人时可重入，single模式下请勿填入多个id},function(res){if (res.err_msg == "selectEnterpriseContact:ok"){if(typeof res.result == 'string'){res.result = JSON.parse(res.result) //由于目前各个终端尚未完全兼容，需要开发者额外判断result类型以保证在各个终端的兼容性}that.selectedUserList = res.result.userList; // 已选的成员列表that.getSelectedUserIds();that.invokeEmit();}});},getSelectedUserIds(){this.selectedUserIds = [];for (var i = 0; i < this.selectedUserList.length; i++){var user = this.selectedUserList[i];this.selectedUserIds.push(user.id); // 已选的单个成员ID}},invokeEmit(){var that = this;if(this.name == 'person'){that.$emit('getPersonList', that.selectedUserList)}else if(this.name = 'leader'){that.$emit('getLeaderList', that.selectedUserList)}}},mounted() {}}
</script>

2.父组件

<template><div class="textarea-con"><div class="textarea-title">参会人员</div><select-child @getPersonList="getPersonList" ref="peopleArr" :name="'person'"></select-child></div>
</template>
<script>
import selectChild from '@/components/selectComponents'
import { initWxConfig } from '@/pub/js/initWxConfig'export default {components:{'select-child': selectChild},name: 'meetingApply',data() {return {peoples: [],}},methods: {getPersonList(value){this.peoples = value},}，mounted() {initWxConfig(this);}}
</script>

3.initWxConfig

/* 企业微信js配置 */
//注意：如果要在页面调用企业微信内部方法，请现在下面的jsApiList数组中添加方法
import { Toast } from 'mint-ui'
export function initWxConfig(vm){var that = vm;var token = vm.util.getCookie('hbzy-user-token')// var url = encodeURIComponent(location.href)var url = 'https://weixin.hbtobacco.cn/hbwebchat/meeting/'vm.axios({url: '获取签名的后台服务地址='+ token + '&url=' + url}).then( (response) => {// console.log(JSON.stringify(response))if(response.status == 200){var timestamp = response.data.timestamp //时间戳var nonceStr = response.data.nonceStr //随机字符串var signature = response.data.signature //签名var appId = response.data.appId //企业idwx.config({beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: appId, // 必填，企业微信的corpIDtimestamp: timestamp, // 必填，生成签名的时间戳nonceStr: nonceStr, // 必填，生成签名的随机串signature: signature,// 必填，签名，见附录1jsApiList: ['selectEnterpriseContact'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});wx.ready(function () {});wx.error(function(res){Toast('initWxConfig:'+JSON.stringify(res))});}else{Toast('else='+response.data.status_msg)}}).catch( (error) => {Toast('catch='+JSON.stringify(error))});
}

注意：

1.子组件建好后，然后在父组件中导入并注册
2.父组件中有一个值:name="'leader'"，子组件可以通过 props属性取得，这里传值只是为了告诉读者子组件如何获取父组件的值
3.由于在父组件中已经引入了子组件，在点击组件的时候触发的是子组件中的selectMeetingUsers方法（在企业微信api调用的文章中），选择并显示图片，delPic方法为删除图片
4.最后调用invokeEmit方法通过 this.$emit('getPersonList', this.selectedUserList)将selectedUserList数组传递到父组件的getPersonList
最后说一句：props和this.$emit才是关键

vue中自定义组件的用法（企业微信通讯录选人）相关推荐

vue中自定义组件的命名规则
问题 vue中自定义的组件名在html中字母大写会报错 html: js: 自定义的组件中字母可以大写,但是在html标签中,字母有大写的就会报错原因这是因为html中不区分大小写,所以在html ...
vue中自定义组件“ directives “的常用功能
directives 可以全局使用以及组件内部定义使用 directives是什么? 注册自定义的指令 directives有什么作用? 对普通 DOM 元素进行底层操作,就会用到自定义指令 dire ...
Vue中分页组件的用法
分页组件 <el-pagination@size-change="handleSizeChange":prev-text="$t('pages.previousPa ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
vue中父子组件及 watch用法
父子组件及 watch vue中父子组件及 watch用法 - coder_zhang123456 - 博客园
20.番外篇——Vue如何自定义组件并且进行全局配置
20.番外篇--如何自定义组件并且进行全局配置前言 1.创建自定义组件 2.导出自定义组件 3.main.js中引入自定义的公共组件并挂在到Vue 4.使用自定义的公共组件前言通过之前的系列文章 ...
简单了解Vue的自定义组件与生命周期
Vue的自定义组件定义格式 Vue.component(组件名称, { props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板 }) 代码解析(详细解释在注解 ...
vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用，详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个详情页面,那么用户就会经常执行打开详情=>返回列表=& ...

vue中自定义组件的用法（企业微信通讯录选人）

vue中自定义组件的用法（企业微信通讯录选人）相关推荐

最新文章

热门文章