Vue3 + Tsx 父子组件通信：突破限制，实现数据共享

2024-01-17 12:50:34

在现代前端开发中，Vue3 和 Tsx 备受青睐，它们可以帮助我们构建更加健壮、灵活的应用程序。然而，在 Vue3 + Tsx 中实现父子组件通信可能会遇到一些挑战，尤其是当我们需要在 template 语法和 tsx 语法之间进行切换时。

在 template 语法中，解决父子组件通信问题非常简单，只需要通过 v-on:getData 就可以监听子组件通过 emit 发送的事件，并获取传来的数据。然而，在 tsx 中并不能够使用 v-on。那么，如何在 tsx 中处理监听事件呢？

答案是通过 on[EventName] 来处理，例如 onClick 可以监听点击事件。下面是一个在 tsx 中监听子组件事件的示例：

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class ParentComponent extends Vue {
  data() {
    return {
      message: 'Hello from parent!'
    };
  }

  handleData(data: string) {
    this.message = data;
  }

  render() {
    return (
      <div>
        <h1>{this.message}</h1>
        <ChildComponent onGetData={this.handleData} />
      </div>
    );
  }
}

在上面的示例中，ParentComponent 是父组件，ChildComponent 是子组件。当子组件调用 emit('getData', 'Hello from child!') 时，父组件的 handleData 方法将被触发，并将子组件传递的数据保存在 message 变量中。

除了事件通信之外，父子组件之间还可以通过属性和插槽进行通信。属性通信是指父组件向子组件传递数据，而插槽通信是指子组件向父组件传递数据。

属性通信非常简单，只需要在父组件中使用 props 属性将数据传递给子组件即可。例如：

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class ParentComponent extends Vue {
  data() {
    return {
      message: 'Hello from parent!'
    };
  }

  render() {
    return (
      <div>
        <h1>{this.message}</h1>
        <ChildComponent message={this.message} />
      </div>
    );
  }
}

在上面的示例中，ParentComponent 将 message 数据传递给了 ChildComponent。ChildComponent 可以通过 props 来访问这个数据。

插槽通信是指子组件向父组件传递数据。要使用插槽通信，需要在子组件中使用 slot 标签，并在父组件中使用 slot 标签将子组件的内容插入到父组件中。例如：

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class ChildComponent extends Vue {
  data() {
    return {
      message: 'Hello from child!'
    };
  }

  render() {
    return (
      <template>
        <slot>{this.message}</slot>
      </template>
    );
  }
}

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class ParentComponent extends Vue {
  render() {
    return (
      <div>
        <h1>
          <ChildComponent>
            <!-- 这里就是插槽的内容 -->
          </ChildComponent>
        </h1>
      </div>
    );
  }
}