Giao tiếp giữa các thành phần cha-con trong Vue.js

1. Cha truyền dữ liệu cho con sử dụng props.

2. Con truyền dữ liệu cho cha bằng cách nhận một hàm từ cha thông qua props và gọi hàm đó.

Tổng kết ví dụ todolist

• Cắt nhỏ các thành phần tĩnh theo chức năng, tránh trùng lặp với các yếu tố HTML.
• Xác định nơi lưu trữ dữ liệu:
  • Một thành phần sử dụng: Lưu trong chính thành phần đó.
  • Nhiều thành phần sử dụng: Lưu trong thành phần cha chung (nâng cấp trạng thái).
• Bắt đầu tương tác bằng cách ràng buộc sự kiện.

Lưu ý khi sử dụng v-model: Không nên liên kết giá trị v-model với props vì props không thể bị thay đổi trực tiếp!

Sự kiện tùy chỉnh của thành phần

Sự kiện tùy chỉnh là phương pháp giao tiếp từ con lên cha.

Sử dụng trường hợp:

• A là cha, B là con. Để truyền dữ liệu từ B lên A, ta cần ràng buộc sự kiện tùy chỉnh trong A.

Ví dụ:

<template>
    <div class="app">
        <Child @send-data="receiveData" />
    </div>
</template>

<script>
export default {
    methods: {
        receiveData(data) {
            console.log('Dữ liệu nhận được:', data);
        }
    }
}
</script>

Trong Child.vue:

<template>
    <div>
        <button @click="sendDataToParent">Gửi dữ liệu</button>
    </div>
</template>

<script>
export default {
    methods: {
        sendDataToParent() {
            this.$emit('send-data', 'Dữ liệu từ con');
        }
    }
}
</script>

Buộc sự kiện tùy chỉnh khác

Có thể sử dụng this.$refs để ràng buộc sự kiện linh hoạt hơn:

mounted() {
    this.$refs.childComponent.$on('custom-event', this.handleCustomEvent);
}

Sự kiện toàn cầu

Một cách giao tiếp giữa các thành phần bất kỳ.

Cài đặt bus sự kiện toàn cục:

new Vue({
    beforeCreate() {
        Vue.prototype.$bus = this;
    }
})

Sử dụng:

• Đăng ký: this.$bus.$on('event-name', callback);
• Gửi dữ liệu: this.$bus.$emit('event-name', data);

Phát hành và đăng ký tin nhắn

Bước cài đặt:

1. Cài pubsub: npm i pubsub-js
2. Đăng ký: import pubsub from 'pubsub-js';
3. Đăng ký nhận dữ liệu: pubsub.subscribe('event-name', callback);
4. Gửi dữ liệu: pubsub.publish('event-name', data);

nextTick

Sử dụng khi muốn thực hiện một số thao tác trên DOM sau khi dữ liệu đã được cập nhật:

this.$nextTick(() => {
    // Thực hiện các thao tác trên DOM
});

Cấu hình proxy trong Vue CLI

Cách 1: Cấu hình đơn giản trong vue.config.js:

devServer: {
    proxy: "http://localhost:5000"
}

Cách 2: Cấu hình chi tiết:

module.exports = {
    devServer: {
        proxy: {
            '/api1': {
                target: 'http://localhost:5000',
                changeOrigin: true,
                pathRewrite: {'^/api1': ''}
            },
            '/api2': {
                target: 'http://localhost:5001',
                changeOrigin: true,
                pathRewrite: {'^/api2': ''}
            }
        }
    }
}

Slot trong Vue

Slot cho phép cha đưa cấu trúc HTML vào vị trí cụ thể trong con.

• Slot mặc định.
• Slot có tên.
• Slot có phạm vi.

Vuex

Vuex quản lý trạng thái tập trung cho ứng dụng Vue.js.

• Cấu hình cơ bản trong store/index.js.
• Sử dụng actions, mutations, state, getters.
• Đọc và viết dữ liệu từ component thông qua $store.

Router Vue

Cấu hình cơ bản:

• Cài đặt vue-router.
• Định nghĩa các route trong router/index.js.
• Sử dụng <router-link> và <router-view> để điều hướng.