Thành phần cục bộ
Cách chúng tôi đưa vào các thành phần cho đến nay giúp chúng có thể truy cập được từ tất cả các tệp *.vue
trong một dự án.
Các thành phần có thể được tạo thành cục bộ , nghĩa là chúng chỉ có thể truy cập được bên trong một tệp *.vue
cụ thể.
Thành phần toàn cầu
Cho đến nay, cách chúng tôi đưa các thành phần vào main.js
làm cho các thành phần này có thể truy cập được bên trong <template>
của tất cả các tệp *.vue
khác trong dự án đó.
Ví dụ
Chúng tôi sử dụng thành phần CompOne.vue
bên trong cả CompTwo.vue
và App.vue
để cho thấy rằng các thành phần có thể truy cập được lẫn nhau bằng thiết lập main.js
hiện tại của chúng tôi.
main.js
:
import { createApp } from 'vue'
import App from './App.vue'
import CompOne from './components/CompOne.vue'
import CompTwo from './components/CompTwo.vue'
const app = createApp(App)
app.component('comp-one', CompOne)
app.component('comp-two', CompTwo)
app.mount('#app')
Chạy ví dụ »Thành phần cục bộ
Chúng ta có thể đưa trực tiếp một thành phần vào thẻ <script>
trong tệp *.vue
thay vì đưa nó vào main.js
.
Nếu chúng tôi đưa trực tiếp một thành phần vào tệp *.vue
, thì thành phần đó chỉ có thể truy cập cục bộ trong tệp đó.
Ví dụ
Để đặt CompOne.vue
cục bộ thành App.vue
và chỉ có thể truy cập được ở đó, chúng tôi sẽ xóa nó khỏi main.js
.
main.js
:
import { createApp } from 'vue' import App from './App.vue'
import CompOne from './components/CompOne.vue' import CompTwo from './components/CompTwo.vue' const app = createApp(App)app.component('comp-one', CompOne)app.component('comp-two', CompTwo) app.mount('#app')
Và thay vào đó hãy đưa trực tiếp CompOne.vue
vào thẻ <script>
của App.vue
.
App.vue
:
<template>
<h3>Local Component</h3>
<p>The CompOne.vue component is a local component and can only be used inside App.vue.</p>
<comp-one />
<comp-two />
</template>
<script>
import CompOne from './components/CompOne.vue';
export default {
components: {
'comp-one': CompOne
}
}
</script>
Chạy ví dụ » Thành phần CompOne.vue
hiện chỉ có trong App.vue
.
Nếu bạn chạy ứng dụng ở chế độ phát triển và thử sử dụng CompOne.vue
từ bên trong CompTwo.vue
, bạn sẽ nhận được cảnh báo: