先定义一个简单的按钮组件 .. 按钮上的文字给它绑定一个动态的数据 .. 名字是 counter .. 在这个组件里我们可以去添加这个数据 .. 这个数据要在一个 data 方法里返回 .. 添加一个 data 方法 .. return 一个对象 .. 里面添加一个 counter 数据，先让它的值等于 0 ..

然后在这个组件的模板的 button 元素上，给它绑定一个点击事件 ... 发生它的时候可以使用 increment 这个方法来处理 .. 在这个组件里面再添加一个 methods 属性 ... 里面定义一个 increment 方法 ... 在方法里可以让这个组件里的 counter 数据的值增加 1 ..

再去用一下这个组件 ... 添加两个自定义的 ui-button 元素 ... 页面上会显示两个按钮 .. 按钮上的文字是 counter 的值 ..

点击其中的一个按钮，会让它的 counter 的值增加 1，这两个按钮元素是不同的作用域，所以不会影响到彼此的 counter 的值 ...

现在我想让点击这两个按钮以后增加应用里的某个数据的值 ... 在应用的数据里，添加一个 total ... 让它的值等于 0 .. 在页面上再绑定一下这个数据 ...

再找到这个按钮组件 ... 我们可以在这个 increment 方法里，用一下 $emit 方法，去触发一个自定义的事件 ... 名字可以是 increment ...

我们可以在使用这个按钮组件的地方，用一下 v-on 指令监听一下发生的 increment 这个自定义事件 ... 发生它的时候，可以用 incrementTotal 这个方法来处理 ...

在这个 Vue 实例里，再添加一个 methods .. 在它里面定义一个 incrementTotal 方法 ... 在方法里可以让 total 的值增加 1 ...

这样不管点击哪个按钮，都会发生一个 increment 事件，我们监听了这个事件，把它交给 incrementTotal 方法来处理，它会让 total 这个数据的值增加 1 ...

随便点击页面上的某个按钮 ... 你会发现这个 total 的值都会增加 1 ..