vue3 emit传值给父组件 并且改变父组件的值

在Vue 3中，你可以使用`$emit`来向父组件传递值并改变父组件的值。

首先，在子组件中使用`$emit`方法来触发一个自定义事件，并传递需要传递的值。例如：

// 子组件
<template>
  <button @click="updateParent">传递值给父组件</button>
</template>

<script>
export default {
  methods: {
    updateParent() {
      this.$emit('update', '传递的值');
    }
  }
}
</script>

然后，在父组件中监听子组件触发的自定义事件，并在事件处理函数中改变父组件的值。例如：

// 父组件
<template>
  <div>
    <p>父组件的值: {{ parentValue }}</p>
    <child-component @update="updateParentValue"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: ''
    }
  },
  methods: {
    updateParentValue(value) {
      this.parentValue = value;
    }
  }
}
</script>

这样，当子组件中的按钮被点击时，会触发`updateParent`方法，然后通过`$emit`方法触发`update`事件，并将需要传递的值作为参数传递给父组件。父组件中通过监听`update`事件，调用`updateParentValue`方法来改变父组件的值。