vue axios this emit
Axios是一个基于Promise的HTTP库，用于发起请求和处理响应，而Vue.js是一个用于构建用户界面的 JavaScript 框架，它将视图与数据相分离，使得开发更加高效。在Vue.js中，我们可以使用Axios来请求数据，但是如何实现Vue组件内使用Axios获取数据时，数据获取成功后将其传递给子组件呢？这时，我们就需要使用到Vue.js中的this和emit方法。
在Vue.js中，this代表当前组件的实例。我们可以在created生命周期函数中使用Axios发送HTTP请求，请求成功后，即可通过this将请求返回的数据保存到当前组件的data中。例如：
created() {
axios.get('/api/data')
.then(response =>{
this.data = response.data;
});
}
上述代码中，created生命周期函数会在Vue组件实例创建时自动调用，我们在其中使用Axios发送HTTP请求，当请求成功时，可以通过this.data将返回的数据保存到当前组件的data中。
接下来，我们需要将这个data传递给子组件。在Vue.js中，我们可以使用emit方法在子组件与父组件之间进行通信。emit方法可以接受两个参数，第一个参数为事件名，第二个参数为需要传递的数据。例如：
// 父组件中
<template>
<div>
<child :childData='data' @parentMethod='parentMethod' />
</div>
</template>
<script>
import Child from './child.vue'
export default {
components: {
Child
},
data() {
return {
data: {}
}
},
methods: {
parentMethod(data) {
console.log(data); // 子组件传递的数据
}
}
}
</script>
// 子组件中
<template>
<div>
<p>{{ childData }}</p>
</div>
</template>
<script>
export default {
props: {
childData: {
type: Object,
required: true
}
},
mounted() {
this.$emit('parentMethod', '子组件数据');
}
}
</script>
在上述代码中，我们在父组件template中使用了child组件，并通过:childData将父组件中的data传递给了子组件。在子组件mounted生命周期函数中，我们又使用this.$emit方法回传了数据，其中parentMethod为事件名，'子组件数据'为需要传递的数据，父组件中定义了和parentMethod同名的方法parentMethod，用于接受并处理子组件传递的数据。
通过以上的方式，我们可以在Vue组件中使用Axios获取数据，并将这些数据传递给子组件。