在 vue 3 的组合 API 中尝试从子组件更改父组件的状态时，this.$emit() 不是一个函数

Question

//父组件

<template>
   <childComp @onchangeData='changeData' />
</template>
<script>
   setup() {
   const state = reactive({
     data: 'anything
   });
    
   function changeData(v){
     state.data = v
   }
   return { changeData}
},
</script>

//Child

<template>
 <button @click='change('hello')' />
</template>

<script>
   setup() {

   function change(v){
     this.$emit('onchangeData', v)
   }
   return{change}
},
</script>

我正在努力通过孩子的按钮单击来改变父母的反应状态。它说 this.$emit 不是一个函数。我尝试了很多方法，例如使用 @onchangeData='changeData()' 而不是 @onchangeData='changeData'、使用箭头函数等。但没有任何效果。在这里，我编写了一个示例和最少的代码以保持简单。但我希望我的问题是清楚的。

Answer 1

看下面的代码片段，this 的组成与 options API 中的不同，因此您需要使用传递给 setup 函数的emit：

const { reactive } = Vue
const app = Vue.createApp({
  setup() {
    const state = reactive({
      data: 'anything'
    });
    function changeData(v){
       state.data = v
    }
    return { changeData, state }
  },
})
app.component("ChildComp", {
  template: `
    <div>
     <button @click="change('hello')">click</button>
    </div>
  `,
  setup(props, {emit}) {
    function change(v){
      emit('onchangeData', v)
    }
    return { change }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
   <child-comp @onchange-data='changeData'></child-comp>
   <p>{{ state.data }}</p>
</div>