vue3子传父新方式

在Vue 3中，可以使用`$emit`来实现子组件向父组件传递数据的新方式。

1. 在子组件中，使用`$emit`触发一个自定义事件，并传递数据给父组件。例如：

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

<script>
export default {
  methods: {
    emitData() {
      const data = '子组件的数据';
      this.$emit('data', data); // 触发自定义事件，并传递数据给父组件
    }
  }
};
</script>

2. 在父组件中，使用`@`符号监听子组件触发的自定义事件，并在对应的方法中接收子组件传递的数据。例如：

<template>
  <div>
    <child-component @data="receiveData"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    receiveData(data) {
      console.log('接收到子组件的数据:', data);
      // 处理接收到的数据
    }
  }
};
</script>

通过上述方式，子组件可以使用`$emit`触发一个自定义事件，并将数据传递给父组件。父组件可以使用`@`符号监听子组件触发的自定义事件，并在对应的方法中接收子组件传递的数据。这种方式实现了子组件向父组件的数据传递，可以灵活地在组件之间进行通信。