<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7.3.1自定义事件</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<p>总数： {{total}}</p>
<my-component @increase='getTotal' @reduce='getTotal'></my-component>
</div>
<script type="text/javascript" src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//子组件用$emit()来触发事件，父组件用$on()来监听子组件的事件
//父组件可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件，如下
Vue.component("my-component",{
template: `
<div>
<button @click="increase">+1</button>
<button @click="reduce">-1</button>
</div>
`,//两个按钮分别绑定了点击事件
data () {
return {
counter: 0,
}//定义 "counter"
},
methods: {
increase: function () {
this.counter++;// "counter" 自增1
this.$emit("increase",this.counter);//将自增1之后的 "counter" 通过自定义的 "increase" 的事件传递给父组件
},
reduce: function () {
this.counter--;//counter自减1
this.$emit("reduce",this.counter);//将自减1之后的 "counter" 通过自定义的 "reduce" 的事件传递给父组件
}
}
})
var vm = new Vue({
el: "#app",
data: {
total: 0
},
methods: {
getTotal: function(value){//上面的点击事件，通过$emit()传递过来的数值是 "this.counter" ，这里用value接收，之后赋值给 "total" ，在根元素上渲染出来
this.total = value;
}
}
})
</script>
</body>
</html>
网友评论