子组件传参给父组件，父组件中一直没有响应怎么办？

Question

这是子组件的传参事件

methods: {
      imgs_click () {
        var that=this;
        this.$axios.get('http://localhost/class/imgl?ID='+that.imgsrc.ID)
          .then(function(res){
            var aaa= JSON.parse(JSON.stringify(res.data));
            // alert(aaa[0].author);
            that.$emit('message_from_imgs',res.data);
          })
          .catch(function(error){
            console.log("失败");
            console.log(error);
          })

        
        
      }
    },

这是父组件的网页代码及事件代码

<imgs v-on:imgs_methods="message_from_imgs"></imgs>
            
            
            
            

message_from_imgs: function (childValue) {
        alert("111");
        this.imgl_message = childValue;
      },

如代码所示，按照我的想法，子组件点击事件（imgs_click）发生以后，子组件先从后台拿到数据，然后通过$emit传给父组件，父组件再把拿到的childvalue用钩子函数写进一个空对象，但是父组件的message_from_imgs 事件里alert("111")始终没有触发，

而且浏览器控制台有个报错是data functions should return an object，我检查了所有data，都是用return包起来且完整的。

想了一个下午还是没弄出来。。请问各位大神这是什么原因？

Answer 1

先弄清楚两个概念就不会混了

• $emit 触发当前实例上的事件。附加参数都会传给监听器回调。
• v-on 绑定事件监听器

这里有一个例子：

// 子组件
export default {
  mounted() {
    this.$emit('customFunc', '我是子组件传给父组件的值')
  },
}

// 父组件
<template>
  <Son v-on:customFunc="fatherFunc" />
</template>
 
<script>
import Son from './components/dispatch/Son'
export default {
  name: 'app',
  components: {
    Son,
  },
 
  methods: {
    fatherFunc(value) {
      console.log(value) // 我是子组件传给父组件的值
    },
  },
}
</script>

Answer 2

// 子组件
this.$emit('planA', data);

// 父组件
<child v-on:planA="doPlanA" ...

doPlanA () {
  ... 
}

Answer 3

好好过一遍文档..
emit函数的参数是事件名，不是事件回调函数名..

Answer 4

emit里面第一个参数是父组件里面的事件名称，例如

<imgs v-on:message_from_imgs="test"></imgs>
test: function (childValue) {
    alert("111");
    this.imgl_message = childValue;
},

Answer 5

// 子组件
this.$emit('children', data);

// 父组件
<child v-on:children="parent" ...

parent () {
//doSomthing
  ... 
}

Answer 6

就是你emit响应的事件名写错了，应该是`
imgs_methods

Answer 7

你应该v-on:message_from_imgs，因为你在子组件中抛出的是message_from_imgs事件