Vuejs 元件之 $emit 和 v-on 的事件傳遞
<!-- 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>