前端 - vue2封装的业务组件获取数据的方法到底是应该在父组件里调用然后传数据进来，还是写在业务组件里，created时调用？

Question

如果业务组件使用比较频繁，要抽成公共的，那么它的获取数据的方法如果不放在业务组件内，是不是意味着每次调用的时候都要写一遍，感觉会很恶心。但是如果写在内部，调用它的父组件应该在什么时机调用它？以及以什么方式调用它呢？

Answer 1

这取决于你的场景。

1. 父组件请求的场景：假如你的公共组件是 table，父组件本身或者其他子组件会操作你 table 的数据并影响 table 组件，此时你应该放在父组件。
2. 子组件单独请求 ： 核心数据仅在组件自身中进行处理，外部无需（操作 ｜ 干预) 的情况下。

Answer 2

看具体使用需求，如果一显示该组件就要调用，就在组件的created周期里面调用

Answer 3

这个问题涉及到Vue组件之间的数据传递和生命周期钩子的使用。在Vue中，有几种方式可以获取数据，包括在父组件中调用子组件并传递数据、在子组件中使用created生命周期钩子获取数据等。具体应该使用哪种方式取决于你的实际需求。

如果你希望在父组件中控制业务组件的获取数据，可以在父组件中定义一个方法，然后在业务组件中使用$emit来触发这个方法并传递数据。这种方法的好处是可以在父组件中控制获取数据的时机，同时在业务组件中可以复用获取数据的方法。例如：

// 父组件<template>  <div>    <my-component @getData="getDataFromApi"></my-component>  </div></template><script>import MyComponent from './MyComponent.vue'export default {  components: { MyComponent },  methods: {    getDataFromApi() {      // 调用 API 获取数据并传递给业务组件      this.$http.get('/api/data').then(response => {        this.$children[0].setData(response.data)      })    }  }}</script>// 业务组件（MyComponent.vue）<template>  <div>    <!-- 组件内容 -->  </div></template><script>export default {  created() {    this.$emit('getData')  },  methods: {    setData(data) {      // 处理接收到的数据      this.$data.data = data    }  }}</script>

如果你希望将获取数据的方法写在业务组件内部，可以在created生命周期钩子中进行调用。这种方式的好处是可以减少父组件中的代码量，但需要在每个需要使用该业务组件的地方重复写一遍获取数据的代码。例如：

// 业务组件（MyComponent.vue）<template>  <div>    <!-- 组件内容 -->  </div></template><script>export default {  data() {    return {      data: null    }  },  created() {    this.getDataFromApi()  },  methods: {    getDataFromApi() {      // 调用 API 获取数据并存储到 data 属性中      this.$http.get('/api/data').then(response => {        this.data = response.data      })    }  }}</script>

在这种情况下，父组件只需要将该业务组件引入并使用即可，无需关心数据的获取。使用该业务组件时，可以在任何需要的时候调用它，并且每个调用都可以独立获取数据，不会互相影响。例如：
javascript vue js javascript vue js javascript vue js javascript vue js javascript vue js javascript vue js javascript vue js javascript vue js javascript vue js javascript vue js javascript vue js javascript vue js javascript vue js