Custom Events (Tùy chỉnh sự kiện) trong Vuejs

Bài học tiếp theo trong phần Component này chúng ta sẽ tìm hiểu về Custom Events ( Tùy chỉnh điều kiện) trong Vuejs các bạn nhé. Nhắc lại một lần nữa nếu bạn chưa tìm hiểu kỹ về Component thì hãy tìm hiểu lại trước khi bắt đầu bài học này.

Custom Events trong Vuejs

Trong các phần trước chúng ta đã giới thiệu sơ qua việc component cha binding data xuống component con thông qua props và component con thông báo lại cho component cha thông qua các events. Vậy thì ở bài hoạc lần này chúng ta sẽ cùng nghiên cứu xem  có các cách gửi events nào nhé.

Using v-on

Trong Vue.js tất cả các Vue instance đều phải implements (kế thừa) một event interface. Đều đó tương đương với việc chúng ta có thể:

• Lắng nghe tất cả các sự kiện thông qua $on(eventName)
• Kích hoạt các sự kiện thông qua $emit(eventName) 

Tuy nhiên các event này không giống như chúng ta sử dụng các eventTarget trên trình duyệt. Có nghĩa là $on sẽ khác với addEventListener và $emit sẽ khác với dispatchEvent.

Ngoài ra thì các component cha cũng có thể lắng nghe các sự kiện từ component con gửi lên thông qua v-on directive.

Tuy nhiên không thể sử dụng $on để lắng nghe các sự kiện được phát ra ở component con. Mà phải sử dụng v-on directive như ví dụ sau:

Ví dụ:

<div id="app">
    <p>{{ count }}</p>
    <child v-on:counter="countPlus"></child>
    <child v-on:counter="countPlus"></child>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    Vue.component('child', {
        template: '<button v-on:click="numberPlus">{{ count }}</button>',
        data : function () {
            return {count: 0};
        },
        methods: {
            numberPlus: function ()
            {
                this.count += 1;
                this.$emit('counter')
            }
        }
    });
    var app = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            countPlus: function ()
            {
                this.count += 1;
            }
        }
    });
</script>

<div id="app">
    <p>{{ count }}</p>
    <child v-on:click.native="countPlus"></child>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    Vue.component('child', {
        template: '<button>Click</button>'
    });
    var app = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            countPlus: function ()
            {
                this.count += 1;
            }
        }
    });
</script>