组件间事件调用
介绍
- 在页面配置的过程中,组件之间如何进行交互是我们一直以来最为关注的。我们希望组件开发者能够将组件中的一些事件定义并暴露出来,供其他组件进行调用,以此来实现组件之间的事件交互。当组件需要配置与其它组件间事件的相互调用时,我们通过
json
数据进行描述。 - 自定义组件有自己的脚手架,大多数只需要配置三个文件就可以了
- 1.在views下新建文件夹,用来保存您的js和json文件,注意命名规范和不要重复命名
- 2.创建的文件夹包含
configJson.js
,index.js
,index.vue
三个文件- 2.1
configJson.js
: 组件的基础配置,包含了json:[]具体参数,props:{}参数的初 始化,events:[]事件 - 2.2
index.js
: 整个项目入口,保持不动就可以 - 2.3
index.vue
: 组件的ui和具体configJson.js
的events的事件如何执行
- 2.1
对外暴露事件
使用场景
- 需要依赖接口修改组件本身部分属性才展示的数据,或者提供的这个事件方便其他组件调用该组件。
创建步骤
1.在configJson.js
中创建events:[]事件
js
events: [
{
name: "组件事件名称",
method: "handleMethod"
}
]
2.在index.vue
中引入mixin
js
import ComFunMixins from "pangea-com/lib/ComFunMixins";
mixins: [ComFunMixins],
3.在index.vue
中的data里声明这个事件然后在methods里创建具体的方法
js
EventOnList: [
{
key: "handleMethod",
fun: params => {// params 开始调用这个方法的传值
this.handleMethod();// 调用methods的handleMethod方法
typeof params.callback === "function" && params.callback();
}
}
]
js
methods: {
handleMethod() {
console.log("这里是回调方法");
}
}
完整demo
configJson.js
js
const comJson = {
json: [],
props: {},
events: [
{
name: "组件事件名称",
method: "handleMethod"
}
]
};
export default comJson;
index.vue
js
<template>
<div>
<a-button
>
按钮表述
</a-button>
</div>
</template>
<script>
import ComFunMixins from "pangea-com/lib/ComFunMixins";
export default {
name: "ButtonDemo",
mixins: [ComFunMixins],
data() {
return {
// 当组件需要对外暴漏事件,供其他组件进行调用时,需配置EventOnList参数,在fun中进行回调方法处理
EventOnList: [
{
key: "handleMethod",
fun: params => {
// 在 handleMethod 方法中进行回调函数编写
this.handleMethod();
typeof params.callback === "function" && params.callback();
}
}
]
};
},
methods: {
handleMethod() {
console.log("这里是回调方法");
}
}
};
</script>
组件调用其他组件
使用场景
- 通过该组件点击、划过、自定义的事件,去调用页面内其他组件的组件方法、API 调用、内置动作
创建步骤
1.在configJson.js
中的json:[]创建事件
js
{
title: "事件配置",
type: "collapse",
coms: [
{
type: "event",
col: "events",
label: "事件",
props: {
eventList: [
{
name: "按钮事件", // 操作名称
method: "handleClick" // 方法
}
]
}
}
]
}
2.在index.vue
中data中声明在template中调用
js
<a-button
@click="methodsObj.handleClick"
>
按钮表述
</a-button>
data() {
return {
methodsObj: {
handleClick: async () => {}
},
};
},
完整demo
configJson.js
js
const comJson = {
json: [
{
title: "事件配置",
type: "collapse",
coms: [
{
type: "event",
col: "events",
label: "事件",
props: {
eventList: [
{
name: "按钮事件", // 操作名称
method: "handleClick" // 方法
}
]
}
}
]
}
],
props: {},
events: []
};
export default comJson;
index.vue
js
<template>
<div>
<a-button
@click="methodsObj.handleClick"
>
按钮表述
</a-button>
</div>
</template>
<script>
import ComFunMixins from "pangea-com/lib/ComFunMixins";
export default {
name: "ButtonDemo",
mixins: [ComFunMixins],
data() {
return {
methodsObj: {
handleClick: async () => {}
},
};
},
};
</script>
暴露参数
使用场景
- 提供该组件自身的参数供其他组件使用
创建步骤
1.在configJson.js
中创建params:[]
js
params: [
{
name: "用户名称",
param: "userName",
paramType: "Sting"
}
],
2.在index.vue
中props获取需要的参数comKey、pageName,可以在特定的事件中将数据保存,我这里在我们自己定义的handleMethod中将数据保存,在开放平台获取
js
props: {
comKey: [String, Number],
// 当前页面store命名空间名称(module)
pageName: String,
},
handleMethod() {
this.$store.dispatch({
type: `${this.pageName}/handleSaveParams`,
payload: {
[this.comKey]: {
userName: this.userName || ''
}
}
});
}
完整demo
configJson.js
js
const comJson = {
json: [],
props: {},
params: [
{
name: "用户名称",
param: "userName",
paramType: "Sting"
}
],
events: []
};
export default comJson;
index.vue
js
<template>
<div>
<a-input
placeholder="Basic usage"
v-model="userName"
@change="handleMethod"
/>
</div>
</template>
<script>
import ComFunMixins from "pangea-com/lib/ComFunMixins";
export default {
name: "VantDemo",
mixins: [ComFunMixins],
props: {
comKey: [String, Number],
// 当前页面store命名空间名称(module)
pageName: String
},
data() {
return {
userName: ""
};
},
methods: {
handleMethod() {
this.$store.dispatch({
type: `${this.pageName}/handleSaveParams`,
payload: {
[this.comKey]: {
userName: this.userName || ''
}
}
});
}
}
};
</script>