<!-- v-on 侦听组件事件，当组件触发事件后进行事件处理 -->
<!-- $emit 触发事件，并将数据提交给事件侦听者 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id = "myApp">
<h1>人生加法</h1>
<add-method :a = "6" :b = "9" @add_event = "getAddResult"></add-method> <!-- v-on侦听事件 当组件触发后执行 getAddResult 方法 -->
<h2>{{result}}</h2>
</div>
<script>
Vue.component('add-method',{
props:['a','b'],
template:'<div><button @click = "add" >加吧</button></div>', //v-on侦听事件 当组件触发后执行 add 方法
methods:{
add: function(){
var value = 0;
value = this.a + this.b;
this.$emit('add_event',{ //当button组件被点击 add_event被触发
result:value
});
}
},
});
var myApp = new Vue({
el:"#myApp",
data:{
result: 0
},
methods: {
getAddResult:function(pval){
this.result = pval.result; //给原始的result与赋值组件中result
}
},
});
</script>
</body>
</html>