关于this.$emit-慕课网

2回答

Dell 2018-07-04 22:39:28

代码截图贴上来我看下

1 回复有任何疑惑可以回复我~

提问者 vylss #1

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="../vue/vue.js"></script>
</head>

<body>
    <div id="app">
        <counter :count="1" @change="changeHandle"></counter>
        <counter :count="2" @change="changeHandle"></counter>
        <div>{{total}}</div>
    </div>
    <script>
    var counter = {
        props: ['count', 'total'],
        data: function() {
            return {
                number: this.count
            }
        },
        template: '<div @click="countHandle">{{number}}</div>',
        methods: {
            countHandle() {
                this.number++
                    counter.$emit('change') //TypeError: counter.$emit is not a function
            }
        }
    }

    var vm = new Vue({
        el: '#app',
        components: {
            counter: counter
        },
        data: {
            total: 3
        },
        methods: {
            changeHandle() {
                this.total = this.total + 1;
            }
        }
    })
    </script>
</body>

回复有任何疑惑可以回复我~ 2018-07-04 23:20:43

提问者 vylss #2
```
在下面，重新编辑了截图，谢谢老师
```
回复有任何疑惑可以回复我~ 2018-07-04 23:24:29

提问者 vylss #3

https://coding.imooc.com/learn/questiondetail/63792.html  老师有空的话再看看这个问题，谢谢

回复有任何疑惑可以回复我~ 2018-07-05 02:14:39

点开查看后面1条评论

提问者 vylss 2018-07-04 23:21:08

字数字数

0 回复有任何疑惑可以回复我~

收起回答

Dell #1

你这个counter后面vue要对他进行编译生成一个vue对象，你直接在代码里用counter的时候它只是一个普通的js对象饮用。所以不要用counter.$emit，这是不好用的，直接用this就可以了

回复有任何疑惑可以回复我~ 2018-07-05 09:56:29

提问者 vylss 回复 Dell #2
```
谢谢老师
```
回复有任何疑惑可以回复我~ 2018-07-05 10:04:34

关于this.$emit

正在回答

2回答

相似问题

请选择置顶位置

本课精华内容

今天新建了一个分支，git pull时发现报错

我的也是，进入的动画没有效果

首页swiper的轮播失效

6-3 按老师的操作改了路由但是显示主页的仍然是去哪儿网的页面

swiper找不到module

【讨论题】Composition API 应用时注意得问题

【讨论题】Composition API 产生背景及解决问题

【讨论题】作为前端，你在开发中是如何进行代码调试 Debug

【讨论题】移动端项目的开发过程中，你遇到过怎样的兼容性问题？

【讨论题】对前端数据管理框架，你有怎样的理解？

热搜

最近搜索清空