vue gojs组件及动态传值

父组件：

// 引入子组件gojs
import goModel from '../../commonTools/go.vue';
export default {
  components: {
    goModel // 生命组件
  },
  data () {
    return {
      ipData:'',
      // 定义为全局数据
      diagramData:[]
    }
  },
  mounted (){
  },
  methods: {
  //结合实际情况调用this.init();
    init() {
      // 从服务器请求JSON格式的文本数据
      let url = RESREQUESTPREFIX + '/custom/garph/findresources?source_id='+this.resId;
      this.$http.get(url).then(function(response){
        if(response.status === 200){
          this.diagramData = response.data;
          // 判断数据不为空是执行，不然会报错
          if(this.diagramData != ''){
            // 子组件中心位置数据
            this.diagramData[0].ip = this.ipData;
          }
        }
      },function(){
        this.$Message.error('数据获取失败,请检查接口是否正常!');
      })
    }
  }
}

子组件

后台数据格式 

[
  {
    "color": "#A570AD",
    "reasonsList": [
      {
        "text": "运维信息管理系统数据库"
      }
    ],
    "key": "10.96.140.136"
  },
  {
    "parent": "10.96.140.136",
    "reasonsList": [
      {
        "text": "互联通spring cloud zookeeper"
      }
    ],
    "dir": "right",
    "key": "10.100.17.189"
  },
  {
    "parent": "10.96.140.136",
    "reasonsList": [
      {
        "text": "111互联通spring cloud"
      }
    ],
    "dir": "right",
    "key": "10.100.17.174"
  },
  {
    "parent": "10.96.140.136",
    "reasonsList": [
      {
        "text": "运维信息管理系统"
      }
    ],
    "dir": "left",
    "key": "10.96.140.117"
  },
  {
    "parent": "10.96.140.136",
    "reasonsList": [
      {
        "text": "运维ITSM系统"
      }
    ],
    "dir": "left",
    "key": "10.96.140.126"
  },
  {
    "parent": "10.96.140.136",
    "reasonsList": [
      {
        "text": "电信通spring cloud"
      }
    ],
    "dir": "left",
    "key": "10.100.136.117"
  },
  {
    "parent": "10.96.140.136",
    "reasonsList": [
      {
        "text": "zookeeper配置中心测试"
      }
    ],
    "dir": "left",
    "key": "10.96.140.71"
  }
]