在 BeforeMount 或 Mounted 中使用道具- VUE.JS

Question

我在子组件中有道具 -> kpi_kalite[]

父组件->mounted():

*(这个kpi_kalite是在父组件的数据中创建的)

 axios.get(URL+ "/KPI/").then(response=>{

   console.log(JSON.parse(JSON.stringify(response.data)))

   this.kpi_kalite.push(response.data[0])

 })

我在父组件中做 'get request' 并将 response.data 推送到 kpi_kalite[]（父组件）

我用这个数组做道具。

然后，我想在 beforeMount 或 Mounted 中做 console.log(this.kpi_kalite)。不过这个道具暂时没有用。

 methods : {
     set_input(){

            console.log(this.kpi_kalite)
            for(const i in this.kpi_kalite){
                console.log(i)
                console.log(JSON.parse(JSON.stringify(this.kpi_kalite))) // output 
                                                                        //   "undefined"
       }
   }

},
beforeMount() {
    this.set_input()
}

控制台输出：未定义

你能帮帮我吗？ ,在HTML-css加载之前，我需要子组件中的父组件数据

Answer 1

LinusBorg 有一篇关于父子生命周期钩子顺序的文章post：

There’s nothing weird or wrong about it, it all follows from the lifecylce logically.

beforeCreate() and created() of the parent run first.

Then the parent’s template is being rendered, which means the child components get created

so now the children’s beforeCreate() and created() hooks execute respecitvely.

these child components mount to DOM elements, which calls their beforeMount() and mounted() hooks

and only then, after the parent’s template has finished, can the parent be mounted to the DOM, so finally the parent’s beforeMount() and mounted() hooks are called.

END

此外，还有一个不错的图表 here。

先挂载子组件，再挂载父组件。因此，子组件中的 console.log(this.kpi_kalite) 不会打印从父组件中的 axios 获取的数据。所以，如果你一开始不渲染子组件，它不会被挂载，因为它还没有被创建。如果你在axios完成后渲染子组件，它会被创建并挂载。然后，console.log 将打印从父级 axios 获得的 kpi_kalite 的值。

父组件:

<ChildComponent v-if="renderChildComponent" :kpi_kalite="kpi_kalite" />

data() {
   return {
      kpi_kalite: [],
      renderChildComponent: false,
   };
},
mounted() {
   axios.get(URL+ "/KPI/").then(response=>{
      console.log(JSON.parse(JSON.stringify(response.data)))
      this.kpi_kalite.push(response.data[0])
      this.renderChildComponent = true;
   })
},

在 BeforeMount 或 Mounted 中使用道具- VUE.JS

Using props in BeforeMount or Mounted- VUE.JS

javascript

lifecycle

vue.js

vue-props