## 前言
* 现在我们结合之前所学，将自定义组件、mock数据、api调用整合在一起。
* 拓展x-button组件，在外部传入参数，组件内部点击后调用api后将返回打印至控制台
## 开始集成
1. 我们将Demo模块中的部分代码拷贝至x-button组件中
2. 可以看到，现在是每次点击按钮后，进行调用接口，并且将返回打印在控制台中
3. 打开系统点击按钮查看控制台，点击两次按钮发现调用成功
## 放上相关代码
* 希望大家都能把代码都手动敲出来，而不是直接复制粘贴
* `/views/demo/demo.vue` ：
~~~
<template>
<div>
<h1>hello saber! im bladex!</h1>
<x-button></x-button>
</div>
</template>
<script>
export default {
name: "demo",
data() {
return {
options: [],
value: ''
}
},
created() {
},
methods: {
onChange() {
console.log(this.value)
},
}
}
</script>
<style scoped>
</style>
~~~
* `/components/demo/x-button.vue` ：
~~~
<template>
<div>
<el-button type="primary" @click="handleSubmit">按钮点击</el-button>
</div>
</template>
<script>
import {getDetail, getTestDetail} from '@/api/demo/demo';
export default {
name: 'x-button',
methods: {
async init() {
const res = await getDetail();
if (res.data.success) {
console.log(res.data.data);
} else {
console.log(res.data.msg);
}
const resTest = await getTestDetail();
if (resTest.data.success) {
console.log(resTest.data.data);
} else {
console.log(resTest.data.msg);
}
},
handleSubmit() {
console.log("按钮点击了");
const promise = this.init();
console.log(promise);
}
}
}
</script>
<style scoped>
</style>
~~~