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

感谢大家帮帮忙

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');
}

回答:

在子组件想获取父组件的方法,可以使用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)
        }
    }
};

回答:

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

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注