时间戳

首页 > 解决方案 > 在 BeforeMount 或 Mounted-VUE.JS 中使用道具

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

问题描述

我在子组件中有道具-> 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])

 })

我在父组件中“获取请求”，并将 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之前，我需要子组件中的父组件数据

标签： javascriptvue.jslifecyclevue-props

解决方案

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

这没有什么奇怪或错误的，这一切都从逻辑上遵循生命周期。

  • 父级的 beforeCreate() 和 created() 首先运行。
  • 然后父模板被渲染，这意味着子组件被创建
  • 所以现在孩子的 beforeCreate() 和 created() 钩子分别执行。
  • 这些子组件挂载到 DOM 元素，调用它们的 beforeMount() 和mounted() 钩子
  • 只有这样，在父模板完成后，父模板才能被挂载到 DOM，所以最后会调用父模板的 beforeMount() 和mounted() 钩子。

结尾

此外，这里有一个很好的图表。

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

父组件：

<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;
   })
},

推荐阅读