vue3组件间通信子传父用vue3

在 Vue3 中，组件间通信子传父的方式和 Vue2 中基本相同，可以通过 props 和 emit 实现。

子组件中通过 $emit 方法触发一个自定义事件，然后在父组件中通过 v-on 指令绑定该事件，并在回调函数中处理子组件传递的数据。

下面是一个示例代码：

子组件 Child.vue：

<template>
  <div>
    <button @click="handleClick">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('child-data', '子组件传递的数据');
    }
  }
}
</script>

父组件 Parent.vue：

<template>
  <div>
    <p>子组件传递的数据：{{data}}</p>
    <child @child-data="handleChildData"></child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      data: ''
    }
  },
  methods: {
    handleChildData(data) {
      this.data = data;
    }
  }
}
</script>

在上面的代码中，子组件 Child 中定义了一个 handleClick 方法，在方法中通过 $emit 方法触发了一个名为 child-data 的自定义事件，并传递了一个字符串参数。

在父组件 Parent 中，通过 v-on 指令绑定了该事件，并在回调函数中处理了子组件传递的数据。

这样就完成了子组件向父组件传递数据的操作。