Vue.js tải thành phần một thành phần

Question

Tôi mới vào Vue.js và muốn sử dụng các thành phần tệp đơn, nhưng tôi không hiểu quy trình làm việc.

Ví dụ, tôi có ba thành phần: App, Grid và List

App.vue

<template> 
    <div id="app"> 
     <div id="grid"></div> 
     <div id="right"></div> 
    </div> 
</template> 

<script> 
    export default { 
     name: 'app', 
     data() { 
      return { 
       message: 'Hello Vue!' 
      } 
     } 
    } 
</script> 

Grid.vue

<template> 
    <div id="left"></div> 
</template> 

<script> 
    export default { 
     name: 'grid', 
     data: function() { 
      return { 
       grid: 'some-data' 
      } 
     } 
    } 
</script> 

List.vue

<template> 
    <div id="right"></div> 
</template> 

<script> 
    export default { 
    name: 'list', 
    data: function() { 
     return { 
      text: 'some-text' 
     } 
    } 
} 
</script> 

Main.js

import Vue from 'vue' 
import App from './vue/App.vue' 
import Grid from './vue/Grid.vue' 
import PatternList from './vue/PatternList.vue' 

new Vue({ 
    el: '#app', 
    render: h => h(App) 
}); 

new Vue({ 
    el: '#grid', 
    render: h => h(Grid) 
}); 

new Vue({ 
    el: '#right', 
    render: h => h(PatternList) 
}); 

Nó hoạt động nhưng tôi hy vọng đây không phải là cách đúng đắn để tạo các thành phần lồng nhau.

Có ai có thể cho biết cách thực hiện không? Cảm ơn

Answer 1

Bạn có thể đăng ký các thành phần sử dụng Vue.component method:

import Vue from 'vue' 
import App from './vue/App.vue' 
import Grid from './vue/Grid.vue' 
import PatternList from './vue/PatternList.vue' 

Vue.component('grid', Grid); 
Vue.component('pattern-list', PatternList); 

new Vue({ 
    el: '#app', 
    render: h => h(App) 
}); 

Và sau đó thêm chúng vào App mẫu trực tiếp sử dụng tên thẻ của họ:

<template> 
    <div id="app"> 
    <grid></grid> 
    <pattern-list></pattern-list> 
    </div> 
</template> 

này đăng ký các thành phần trên toàn cầu, có nghĩa là bất kỳ Ví dụ Vue có thể thêm các thành phần đó vào các mẫu của chúng mà không cần bất kỳ thiết lập bổ sung nào.

---

Bạn cũng có thể đăng ký thành phần để một trường hợp Vue, như vậy:

new Vue({ 
    el: '#app', 
    render: h => h(App), 
    components: { 
    'grid': Grid, 
    'pattern-list': PatternList 
    } 
}); 

Hoặc trong thẻ script của một thành phần đơn file:

<script> 
import Grid from './vue/Grid.vue' 

export default { 
    name: 'app', 
    components: { 
    'grid': Grid, 
    'pattern-list': PatternList 
    } 
}); 
</script> 

này đăng ký các thành phần chỉ với ví dụ Vue đó, có nghĩa là các thành phần đã đăng ký đó sẽ chỉ có sẵn để sử dụng trong khuôn mẫu cho cá thể Vue đó. Một thành phần con sẽ không có quyền truy cập vào các thành phần đã đăng ký đó trừ khi các thành phần đó cũng được đăng ký cho cá thể Vue con.