解决Vue中子组件$emit 父组件没有反应（子组件无法调用父组件方法）

首先检查$emit()中方法名的大小写, 不能使用驼峰式命名，必须全部小写

javascript 复制代码

<!-- 子组件 List -->
<template>
  <div class="list">
    <button @click="change(2)" />
  </div>
</template>
<script>
export default {
  change (num) {
    let data = { page: num }
    // 错误的写法 $emit方法名不能为驼峰式，要全部小写！
    this.$emit('changePage', data) 

    // 正确的写法 
    this.$emit('changepage', data)
  }
}
</script>

如果还不行，检查父组件在调用子组件时是否绑定了该事件(v-on:changepage / @changepage)

javascript 复制代码

<!-- 父组件 Index -->
<!-- 调用子组件List -->
<template>
  <div class="xxxxx">
    <!--这里是重点，要绑定$emit调用的方法名，注意要小写-->
    <list @changepage="changePage" /> 
  </div>
</template>
<script>
import List from '子组件地址'
export default {
  name: 'index',
  components: { List }, // 注册子组件
  methods: {
    changePage (data) {
      console.log(data.page)
    }
  }
}
</script>

解决Vue中子组件$emit 父组件没有反应 （子组件无法调用父组件方法）

解决Vue中子组件$emit 父组件没有反应（子组件无法调用父组件方法）