javascript - 将 axios 中的 Prop 传递给 Vue.js？

Question

我想将 Prop 从父组件传递给子组件。我的 Prop 是tid .

这是父组件:

<div id="tracksec" class="panel-collapse collapse">
    <library :tid="track.category_id"></library>
</div>

这是子组件:

<script>
import Chapter from "./chapter";
import Http from "../../services/http/httpService";
export default {
    components: {Chapter},
    props:['tid'],
    name: "library",
    data(){
        return{
            library:{},
        }
    },
    computed:{
      getPr(){
          return this.$props;
      }
    },
        mounted(){
      console.log(this.$props);
        Http.get('/api/interactive/lib/' + this.tid)
            .then(response => this.library = response.data)
            .catch(error => console.log(error.response.data))
    }
}

这是http源:

import axios from 'axios';


class httpService {

static get(url, params) {
    if (!params) {
        return axios.get(url);
    }
    return axios.get(url, {
        params: params
    });
}

static post(url, params) {
    return axios.post(url, params);
}
}

export default httpService;

我想通过 tid http.get 的值功能。例如:

Http.get('/api/interactive/lib/' + this.tid)

然而 tid值为 undefined .
我如何获得 tid在挂载或创建的钩子(Hook)中？

Answer 1

我是 Vue 的新手，但我认为您可能想要添加一个在更改时触发的“观察者”。您的“track-object”在创建时为空，此前导 track.category_id 未定义。然后，当您从 HTTP 获取答案时，您的值已设置，但未在库组件中更新。
像这样的东西:

<script>
import Chapter from "./chapter";
import Http from "../../services/http/httpService";
export default {
    components: {Chapter},
    props:['tid'],
    name: "library",
    data(){
        return{
            library:{},
        }
    },
    watch: {
        // if tid is updated, this will trigger... I Think :-D
        tid: function (value) {
          console.log(value);
            Http.get('/api/interactive/lib/' + value)
            .then(response => this.library = response.data)
            .catch(error => console.log(error.response.data))
        }
      },
    computed:{
      getPr(){
          return this.$props;
      }
    },
        mounted(){
      console.log(this.$props);
      
      // Will be undefined
      /*
        Http.get('/api/interactive/lib/' + this.tid)
            .then(response => this.library = response.data)
            .catch(error => console.log(error.response.data))*/
    }
}
</script>

Documentation about watchers
(无法测试代码，但您可能会明白)