内置方法
组件内都默认提供了一些基础方法,只需要在组件内增加即可实现对应的功能,然后在方法内实现逻辑即可。
propDataWatchHandle
其主要作用在于开发工具修改属性的时候能实时渲染应用到组件上,每次修改属性都会调用此方法,如下示例:
<template>
</template>
<script>
export default {
name: 'Demo',
data(){
return {
propData:this.$root.propData.compositeAttr||{}
}
},
created() {
},
methods:{
/**
* 提供父级组件调用的刷新prop数据组件
*/
propDataWatchHandle(propData){
this.propData = propData.compositeAttr||{};
}
}
}
</script>
<style lang="scss" scoped>
</style>
receiveBroadcastMessage
用于接收组件之间通信的消息,如下示例:
<template>
</template>
<script>
export default {
name: 'Demo',
data(){
return {
}
},
created() {
},
methods:{
/**
* 组件通信:接收消息的方法
*/
receiveBroadcastMessage(object) {
console.log("组件收到消息", object);
}
}
}
</script>
<style lang="scss" scoped>
</style>
key | 说明 |
---|---|
type | 消息类型,内置协议值参考组件通信-内置通信协议 |
message | 实际的消息对象 |
messageKey | 消息的key值 |
isAcross | 如果为true则代表发送来源是其他页面的组件,默认为false |
triggerType | 消息变化触发的类型值,AT:自动触发的,MT:手动切换触发的,OT:其他方式触发的 |
... | 其他自定义的类型值,可以参考发送的时候携带的额外参数 |
提示
发送与接收详细说明请参考:组件通信
setContextValue
用于设置组件的上下文内容值,组件内根据需要自行对数据进行处理显示,如下示例:
<template>
</template>
<script>
export default {
name: 'Demo',
data(){
return {
}
},
created() {
},
methods:{
/**
* 设置组件的上下文内容值
*/
setContextValue(object) {
console.log("接收到的内容值", object);
}
}
}
</script>
<style lang="scss" scoped>
</style>
key | 说明 |
---|---|
type | 定义的类型,已知类型:pageCommonInterface(页面统一接口返回值) |
key | 数据key标识,页面每个接口设置的数据集名称,方便识别获取自己需要的数据 |
data | 数据集,内容为:字符串 or 数组 or 对象 or 任意格式数据 |
提示
目前页面属性配置的页面接口都会回调结果集给所有组件的此方法,并且type类型值为pageCommonInterface
。
getContextValue
用于获取组件的上下文内容值,组件内根据需要自行对数据进行处理返回,如下示例:
<template>
</template>
<script>
export default {
name: 'Demo',
data(){
return {
}
},
created() {
},
methods:{
/**
* 获取需要返回的值,例如:{noVerify:true} 代表组件内部不进行校验
*/
getContextValue(object) {
//此返回结果仅作为示例,并不固定。
let result = {
type: "success",
message: "",
key: this.propData.formFiledKey || this.propData.ctrlId,
};
return result;
}
}
}
</script>
<style lang="scss" scoped>
</style>
表单类型的控件建议返回下面统一格式,后端处理从而更加方便,如下示例:
{
"type":"success",
"message":"type为失败的时候原因",
"key":"定义的key标识,一般组件定义了一个属性,然后获取指定属性填写的值,这样返回后就能识别对应的字段或者元数据",
"data":"要返回的值,内容为:字符串 or 数组 or 对象 or 任意格式数据",
}