vue jsx 调用子组件调用父组件

在 Vue 框架中，JSX 是一种用于声明虚拟 DOM 的语法。如果需要在 Vue 中使用 JSX，则需要使用 Vue JSX 插件。在编写具有嵌套关系的组件时，我们可以通过在子组件中使用 props 进行数据传递。然后，我们可以在子组件中通过触发事件来调用父组件中的方法。

在子组件中，我们可以通过 $emit 方法来触发自定义事件并传递数据。例如，我们可以在子组件中添加以下代码：

<button @click="$emit('update:message', message + '!')">点击更新</button>

这里，我们在子组件的按钮上绑定了一个 click 事件，并在该事件中使用 $emit 方法触发了一个名为 update:message 的自定义事件，并携带了 message + '!' 的数据。

在父组件中，我们可以使用 v-on 指令监听该自定义事件，并在该事件中调用一个方法。例如，我们可以在父组件中添加以下代码：

<my-component v-on:update:message="updateMessage"></my-component>

这里，我们在父组件中使用 v-on 指令监听了子组件触发的 update:message 自定义事件，并将其绑定到了父组件中的 updateMessage 方法上。

最后，在父组件中，我们需要定义一个名为 updateMessage 的方法来处理子组件传递过来的数据。例如，我们可以在父组件的 methods 对象中添加以下代码：

methods: {
  updateMessage: function (message) {
    this.message = message
  }
}

这里，我们定义了一个名为 updateMessage 的方法，并将其绑定到了子组件触发的 update:message 自定义事件上。在该方法中，我们将传递过来的数据赋值给了父组件的 message 数据属性。这样，每次子组件中的按钮被点击时，父组件的 message 数据属性都会被更新。