對vue中v-on綁定自定事件的實例講解

來源：懂視網責編：小采時間：2020-11-27 22:08:11

對vue中v-on綁定自定事件的實例講解

對vue中v-on綁定自定事件的實例講解:關于官網vue中v-on綁定自定義事件的個人理解對官網實例進行了一些修改，如下圖： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>v-on綁定自定義事件</tit

推薦度：

點擊下載本文 文檔為doc格式

導讀對vue中v-on綁定自定事件的實例講解:關于官網vue中v-on綁定自定義事件的個人理解對官網實例進行了一些修改，如下圖： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>v-on綁定自定義事件</tit

關于官網vue中v-on綁定自定義事件的個人理解

對官網實例進行了一些修改，如下圖：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>v-on綁定自定義事件</title>
 <script src="vue.js"></script>
</head>
<body>
<div id="app">
 <p>{{ total }}</p>
 <button-counter v-on:increment="father1"></button-counter>
 <button-counter v-on:incr="father2"></button-counter>
 <button-counter v-on:inc="father1"></button-counter>
</div>
<script>
 Vue.component('button-counter', {
 template: '<button v-on:click="child">{{ counter }}</button>',
 data: function () {
 return {
 counter: 0
 }
 },
 methods: {
 child:function(){
 this.counter += 1;
 this.$emit('increment');
 this.$emit('incr');
 this.$emit('inc');
 }
 }
 });
 new Vue({
 el: '#app',
 data: {
 total: 0
 },
 methods: {
 father1: function () {
 this.total += 1
 },
 father2: function () {
 this.total -= 1
 }
 }
 })
</script>
</body>
</html>