通过 jsx 方式如何进行父子组件通讯

[aituanyuan]

选择要提交 issue 的库

vue-easytable

Issue 类型

Bug

Issue 标题

也可以通过 import关键字导入一个组件 该组件中的派发的事件在外边如何接收

仓库版本

v2.21.6

Vue 版本

vue2

浏览器

Chrome

系统类型

Windows

重现链接

Windows

重现步骤

如何在外边接收派发的事件

期望的结果是什么？

如何在外边接收派发的事件

实际的结果是什么？

如何在外边接收派发的事件

[huangshuwei]

不好意思没理解你的意思。如果没有重现示例，请尽可能描述下你的问题

[aituanyuan]

cell custom 中可以通过import引入组件 在这个组件中派发的事件 怎么在组件外边监听到

[huangshuwei]

1、你的问题可以归纳为，通过 jsx 方式如何进行父子组件通讯。首先假设你清除jsx的语法，vue2官方文档:https://v2.cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1

2、我这里写了一个示例你可以参考下：https://codesandbox.io/s/vue-easytable-2-21-6-example-forked-76ofpo?file=/child-comp.vue

示例代码：

父组件：

<template>
  <ve-table
    style="width: 100%"
    border-y
    :columns="columns"
    :table-data="tableData"
  />
</template>

<script>
import ChildComp from "./child-comp";

export default {
  data() {
    return {
      columns: [
        {
          field: "",
          key: "a",
          title: "Row Number",
          width: 200,
          align: "center",
          renderBodyCell: ({ row, column, rowIndex }, h) => {
            const childCompProps = {
              props: {
                rowIndex: rowIndex,
              },
              on: {
                test: (param) => {
                  alert(`Parent child component communication demo: ${param}`);
                },
              },
            };

            return <ChildComp {...childCompProps} />;
          },
        },
        {
          field: "date",
          key: "b",
          title: "Date",
          width: 200,
          align: "center",
        },
        {
          field: "hobby",
          key: "c",
          title: "Hobby",
          width: 300,
          align: "left",
        },
        {
          field: "address",
          key: "d",
          title: "Address",
          width: "",
          align: "left",
        },
      ],
      tableData: [
        {
          name: "John",
          date: "1900-05-20",
          hobby: "coding",
          address: "No.1 Century Avenue, Shanghai",
        },
        {
          name: "Dickerson",
          date: "1910-06-20",
          hobby: "coding",
          address: "No.1 Century Avenue, Beijing",
        },
        {
          name: "Larsen",
          date: "2000-07-20",
          hobby: "coding and coding repeat",
          address: "No.1 Century Avenue, Chongqing",
        },
        {
          name: "Geneva",
          date: "2010-08-20",
          hobby: "coding and coding repeat",
          address: "No.1 Century Avenue, Xiamen",
        },
        {
          name: "Jami",
          date: "2020-09-20",
          hobby: "coding and coding repeat",
          address: "No.1 Century Avenue, Shenzhen",
        },
      ],
    };
  },
  methods: {
    editRow(rowIndex) {
      alert(`eidt row number:${rowIndex}`);
    },
    deleteRow(rowIndex) {
      this.tableData.splice(rowIndex, 1);
    },
  },
};
</script>

            <style>
.text-bold {
  font-weight: bold;
}
</style>

子组件:

<template>
  <div class="other-comp">
    <span style="color: #1890ff">row index: {{ rowIndex }}</span>
    <button @click="clickMe">Click me</button>
  </div>
</template>

<script>
export default {
  props: {
    rowIndex: {
      type: Number,
      required: true,
    },
  },

  methods: {
    clickMe() {
      this.$emit("test", this.rowIndex);
    },
  },
};
</script>

[aituanyuan]

谢谢