绑定变量

父页面将 graph_data 传递给子页面 data

<template>
  <G6Editor mode="edit" :data="graph_data">
  </G6Editor>
</template>
<script>
import G6Editor from '@/components/G6Editor'
export default {
    components: {
      G6Editor
    },
    data () {
      return {
        graph_data: {}
      }
    }
}

子页面变量绑定 data 引用了父页面的 graph_data

<script>
export default {
  props: {
    height: {
      type: Number,
      default: document.documentElement.clientHeight - 140
    },
    width: {
      type: String,
      required: true,
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      editor: {},
    };
  },
  methods: {

  }
}
</script>

以上绑定的变量，在子页面是只读的。绑定可变变量, 需在变量名称下添加 .sync 后缀。如下：

<pagination 
  :page.sync="queryParams.pageNum"
  :limit.sync="queryParams.limit" />

子页面通过修改变量：

this.$emit('update:page', val)

绑定函数

一、父页面集成子页面，采用 @func 传递函数

1. ref 等于 selectTableDialog 定义一个引用；
2. @ok 定义一个父函数 selectTableHandle 绑定到子页面的 ok 函数上；

<template>
  <import-table ref="selectTableDialog" @ok="selectTableHandle" />
</template>
<script>
import importTable from "@/views/modules/datadev/importTable";
export default {
  name: 'nodeDrawer',
  components: {
    importTable
  },
  data () {
  }
}

父页面调用子页面函数noSelectDBShow：

this.$refs.selectTableDialog.noSelectDBShow('for', bar)

子页面调用父页面函数 ok(selectTableHandle)：

this.$emit("ok", 'for', bar)

二、父页面集成子页面，直接传递函数句柄给子页面

// 绑定点击事件
this.$refs.taskweek_chart.show(for, bar, (params) => {
  console.log(params);
})

子页面接收函数参数，并调用父页面函数

show(data, settings, callback) {
  callback('ps')
}