我需要在带有数据页面的页面中的组件中运行功能答案

【问题标题】：i need run function in component from page with data page我需要在带有数据页面的页面中的组件中运行功能
【发布时间】：2021-09-23 10:45:57
【问题描述】：

我有一个用于绘制图形或树的组件，我在页面中使用这个组件。我的 axios 在页面上并提供数据，我需要将数据传递给组件的功能，然后从页面数据中绘制我的树。

我的页面

<template light>
  <v-app>
    <TreeComponent :treedata="treeData"/>
  </v-app>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      treeData: {}
    }
  },
  mounted() {
    axios
      .get('url')
      .then(response => {
        this.treeData = response.data;
      })
  }
}
</script>

我的树组件

export default {
  props: {
    treedata: {
      type: Object
    },
  },
  methods: {
    drawTree(data){
      console.log("draw")
    }
  },
  mounted() {
    this.drawTree(this.treedata)
  },
}

【问题讨论】：

你的道具/事件流程看起来是正确的，那么问题是什么
这不起作用。收到信息后日志不起作用
您的代码看起来不错，您是否尝试过在不使用 v-app 组件的情况下对其进行测试，看看是否会阻止某些内容？
不工作。此外，向我显示该值的输出是未定义的。 drawTree 函数在从服务器接收到数据后不运行。 drawTree 函数以未定义的值开始运行一次。

标签： vue.js nuxt.js vuejs3

【解决方案1】：

您在 API 调用完成之前安装 TreeData 组件，这意味着 drawTree 方法在 treeData 仍未定义时运行。两种选择：

如果需要绘制一次，在收到数据时，在你的主页面组件中添加v-if="treeData"。这只会在您的数据从服务器返回后呈现（当 treeData 为真值时）。

MainPage.vue

<template light>
  <v-app>
    <TreeComponent v-if="treeData" :treedata="treeData"/>
  </v-app>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      treeData: null  // empty object is truthy, so change to falsey value
    }
  },
  mounted() {
    axios
      .get('url')
      .then(response => {
        this.treeData = response.data;
      })
  }
}

如果每次treeData发生变化都需要重新绘制，创建一个watcher：

TreeComponent.vue

export default {
  props: {
    treedata: {
      type: Object
    },
  },
  methods: {
    drawTree(data){
      console.log("draw", { data })
    }
  },
  watch: {
    treedata: {
      immediate: true,
      deep: true,
      handler(newV, oldV) {
        this.drawTree(newV)
      }
    },
  },
}

【讨论】：