this.$emit() 不是一个函数，同时试图从 child 中的 parent 组件中更改 parent 中的状态 API in vue 3

Question

//Parent组件

<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>

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

Answer 1

看下面的代码片段，this 与选项 API 的组成不同，因此您需要使用传递给设置函数的 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>

Answer 2

父组件：

<template>
   <childComp @onchangeData='changeData' />
</template>
<script>
export default {
   methods: {
     changeData(v){
       this.state = v
     }
   },
   data() {
    return {
      state: null,
   },
};
</script>

子组件：

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

<script>
export default {
   methods: {
     change(v){
       this.$emit('onchangeData', v)
     }
   }
};
</script>

this.$emit() 不是一个函数，同时试图从 child 中的 parent 组件中更改 parent 中的状态 API in vue 3

this.$emit() is not a function while trying to change state in parent component from child in composition API in vue 3

javascript

vue.js

vuejs3

vue-composition-api

laravel-mix-vue3