thắc mắc Hỏi về Framework Vuejs

Front End Developer

Junior Member
JavaScript:
const app = Vue.createApp({
  /* options */
})

The application instance is used to register 'globals' that can then be used by components within that application.

Câu này dịch sao vậy mn, sao lúc tài liệu nói là application instance lúc lại nói là component nhỉ, vậy 2 cái này khác nhau như nào :canny:
 
Hiểu đơn giản thì một application instance tức là một ứng dụng (application). trong một ứng dụng sẽ cấu thành từ nhiều component.
Hầu hết chúng ta chỉ tạo một application instance, nó sẽ render một root component vào một vị trí nào đó - hay còn gọi là mount app vào container. (trong root sẽ sử dụng các component khác).
Vue cho phép khai báo "global" nhiều thứ vào một application instance (ví dụ component) để có thể dùng đc ở các component khác bên trong instance đó mà không phải import tường minh trong từng component khi muốn sử dụng các thành phần kia.
 
Hiểu đơn giản thì một application instance tức là một ứng dụng (application). trong một ứng dụng sẽ cấu thành từ nhiều component.
Hầu hết chúng ta chỉ tạo một application instance, nó sẽ render một root component vào một vị trí nào đó - hay còn gọi là mount app vào container. (trong root sẽ sử dụng các component khác).
Vue cho phép khai báo "global" nhiều thứ vào một application instance (ví dụ component) để có thể dùng đc ở các component khác bên trong instance đó mà không phải import tường minh trong từng component khi muốn sử dụng các thành phần kia.

Như này à thím

2e9e9b3a166ee330ba7f.jpg
 
Đối với Vue 3 như bạn đang tìm hiểu thì cơ bản thì nó sẽ giống như thế này:
1619976129885.png

Sau đó sẽ có thể mount ra một vị trí nào đó trên trang web qua method mount.
Dưới đây là code của hàm createApp kia, trong đó sẽ cho thấy có một số phần global như hình trên:
https://github.com/vuejs/vue-next/blob/v3.0.11/packages/runtime-core/src/apiCreateApp.ts#L124-L303
Ví dụ:
JavaScript:
import { createApp } from "vue";
import App from "./App.vue";
import HelloGlobal from "./components/HelloGlobal.vue";

const vueApp = createApp(App);
vueApp.component('hello-global', HelloGlobal);

vueApp.mount("#app");

Ở trên đã khai báo 1 component global tên là "hello-global", lúc này tất cả các component ở trong App.vue component kia sẽ có thể sử dụng component trên mà không cần phải khai báo gì.

Ngoài cách khai báo global (sẽ dễ dẫn đến đụng độ, khó quản lý, etc) thì có cách khác là tạo component và nó sẽ được khai báo ở mỗi component muốn sử dụng chúng (khai báo local).
Code demo: https://stackblitz.com/edit/vue-jckis9?file=src/main.js

Chi tiết về component có thể xem ở các link sau.

https://v3.vuejs.org/guide/component-basics.html
https://v3.vuejs.org/guide/component-registration.html
 
Sửa lần cuối:

Thống kê chủ đề

Ngày tạo
Front End Developer,
Người trả lời cuối
tuantiepnb09,
Trả lời
5
Lượt xem
1.529
Quay lại
Lên đầu trang