Skip to content

组件间事件调用

介绍

  • 在页面配置的过程中,组件之间如何进行交互是我们一直以来最为关注的。我们希望组件开发者能够将组件中的一些事件定义并暴露出来,供其他组件进行调用,以此来实现组件之间的事件交互。当组件需要配置与其它组件间事件的相互调用时,我们通过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的事件如何执行

对外暴露事件

使用场景

  • 需要依赖接口修改组件本身部分属性才展示的数据,或者提供的这个事件方便其他组件调用该组件。

创建步骤

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>