vue中$emit如何取得返回值？

Question

感谢大家帮帮忙

html部分

<div class="vue">
    <!-- 组件绑定了一个事件 -->
    <test-component v-on:on-ok="ok"></test-component>
</div>

js部分

//组件定义
var tc = {
    template: '<div><button v-on:click="ok">click ok</button></div>',
    methods: {
        ok:function(){
            this.$emit('on-ok');
            //我想在这儿得到 'haha' 这个字符串
        }
    }
};

//根实例
new Vue({
    el:'.vue',
    components:{
        'test-component': tc
    },
    methods: {
        ok: function(){
            return 'haha';
        }
    }
});

不太好看的解决方案

//组件中
this.$emit('on-ok', function(str){
    alert(str);
});

//根实例中
ok: function(callback){
    callback('haha');
}

Answer 1

在子组件想获取父组件的方法，可以使用this.$parent.ok()

//组件定义

var tc = {
    template: '<div><button v-on:click="ok">click ok</button></div>',
    methods: {
        ok:function(){
            var haha = this.$parent.ok()
            alert(haha)
        }
    }
};

Answer 2

使用$emit是子组件向父组件通信。你顺序反了。父你的这个问题用 props就可以了

Answer 3

题主后来有找到比较美观的方法吗？我也碰到类似问题，是在构建一个自动化平台的时候，我想写一个beforeEdit事件，供后续开发者挂载条件，条件不符合，则不执行组件上的某些行为，需要$emit等待一个布尔值，看来只能用比较原始的方法吗？

Answer 4

你搞反了， $emit是子组件往父组件传出触发事件的。 如果你想得到'haha' 字符串 应该用props
https://cn.vuejs.org/v2/guide...使用-Props-传递数据