Vue事件派发后接收不到,求指点?

Tenadolanter
  • 98

如下代码,我从子组件派发一个事件,但是在父组件中并没有接受到,这是为什么,代码如下:

说明:代码可以直接在浏览器下运行查看效果,结果会在控制台打印。

<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<div id="app">
    <child v-on:test='getEmit'></child>
</div>
<script type="text/javascript">
var Template={
    'child':{
        template:'<button v-on:click="func()"  ref="butt">{{name}}</button>',
        data:function(){
            return {
                'name':'nihao'
            }
        },
        methods:{
            func:function(){
                console.log("输出button内容"+this.$refs.butt.textContent);
                vm.$emit('test', this.$refs.butt.textContent)
            }
        }
    }
};
var vm=new Vue({
    el:'#app',
    data:{},
    methods:{
        getEmit:function(){
            // 这里没有输出,为什么
            console.log("div触发");
        }
    },
    components:Template
});
// vm.$on('test',function(e){
//     console.log('on触发输出内容'+e);
// });
</script>
评论
阅读 765
2 个回答

将func里面的的vm改为this就好了哦,因为emit是子组件提交事件的呢,可以看看官网api进而了解一下

 template:'<button v-on:click="func()"  ref="butt">{{name}}</button>',

改成

 template:'<button v-on:click="func"  ref="butt">{{name}}</button>',
撰写回答

登录后参与交流、获取后续更新提醒

宣传栏