Tìm hiểu về các đạo cụ thành phần trong VueJS

Question

Tôi đang thử các vuejs bằng cách làm theo cùng với loạt các đợt phát sóng trên webcast về điều này. Trong https://laracasts.com/series/learning-vue-step-by-step/episodes/8, Jeffery Way thảo luận về các thành phần tùy chỉnh. Tôi có đoạn code sau đây dựa trên thu hình màn ảnh của mình:

<div id="app"> 
     <tasks list="tasks"></tasks> 
    </div> 

    <template id="tasks-template"> 
     <ul> 
      <li :class="{'completed' : task.c}" @click = "task.c = ! task.c" v-for ="task in tasks">{{task.t}}</li> 

     </ul> 

    </template> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script> 
    <script type="text/javascript"> 

    vue.component('tasks', { 
    template: '#tasks-template', 

    props:['list'] // why not props:['tasks'] ?? 

    }); 

    new Vue({ 
    el: '#app', 
    data: { 
     tasks: [ 
      {t: 'go to doctor', c: false}, 
      {t: 'go to work', c: false}, 
      {t: 'go to store', c: true} 
     ] 

    } 

Trong này, ông thảo luận về cách thiết lập các đạo cụ như sau:

props:['list'] 

Tại sao nó không

props:['tasks'] ? 

Trong http://vuejs.org/guide/components.html#Props nó khẳng định:

Mọi comp instance onent có phạm vi riêng biệt. Điều này có nghĩa là bạn không thể (và không nên) trực tiếp tham chiếu dữ liệu gốc trong mẫu của thành phần con. Dữ liệu có thể được chuyển xuống thành phần con bằng cách sử dụng props.A "prop" là một trường trên dữ liệu của một thành phần dự kiến ​​sẽ được chuyển xuống từ thành phần cha của nó. Thành phần con cần tuyên bố rõ ràng các đạo cụ mà nó dự kiến ​​sẽ nhận được bằng cách sử dụng tùy chọn đạo cụ:

Thành phần này biết cách liên kết mảng nhiệm vụ với danh sách như thế nào? Cũng trong trường hợp này, tôi giả sử child = component và parent = vue instance?

Answer 1

Thuộc tính trên thành phần của bạn được gọi là list và giá trị được chuyển đến đó là tasks.

Hãy xem điều này. Trước tiên, bạn có thể hiện Vue chính được đính kèm (được gắn) vào phần tử có mã định danh #app. Vì vậy, đây là điểm khởi đầu của bạn.

<div id="app"> 
    <tasks list="tasks"></tasks> 
</div> 

bên trong div của bạn, bạn có thẻ <tasks>. thẻ tương ứng với một thành phần con, vì vậy

con = thành phần và phụ huynh = instance vue

có phải là đúng. Thành phần <tasks> là phần mở rộng của lớp Vue, chỉ có thuộc tính được khai báo như list. Điều quan trọng ở đây là phạm vi. Chú ý rằng thuộc tính list thuộc về các thành phần nhiệm vụ, và không có giá trị trong khai báo của nó và giá trị được truyền cho nó trên mẫu (mọi thứ bên trong div #app) thuộc về cá thể Vue mẹ (được khai báo trên data của cá thể Vue). Vậy tại sao không props:['tasks']? Vì thành phần <tasks> không có tasks dữ liệu hoặc thuộc tính. nếu bạn thực sự tuyên bố thuộc tính giống như công việc, bạn sẽ phải viết mẫu của mình như sau

<div id="app"> 
    <tasks tasks="tasks"></tasks> 
</div> 

đó sẽ là một sự bối rối khó hiểu. Vì vậy, đó là lý do tại sao prop là list và vì khai báo list="tasks" là thành phần biết rằng thuộc tính danh sách có giá trị của mảng nhiệm vụ cha.

Answer 2

Bây giờ Vuejs 2.x được phát hành. Bạn có thể sử dụng v-bind để liên kết động các đạo cụ.Bạn cũng có thể tham khảo https://vuejs.org/v2/guide/components.html#Dynamic-Props

Một điều bạn cần lưu ý là thuộc tính HTML phân biệt chữ hoa chữ thường, do đó khi sử dụng mẫu không phải chuỗi, tên propelCased prop cần sử dụng tương đương kebab-case (dấu gạch nối) . Ví dụ:

Vue.component('child', { 
 
    // camelCase in JavaScript 
 
    props: ['myMessage'], 
 
    template: '<span>{{ myMessage }}</span>' 
 
})

<!-- kebab-case in HTML --> 
 
<child my-message="hello!"></child>

Vì vậy, mẫu của bạn có thể thay đổi xuống dưới

<div id="app"> 
 
     <tasks v-bind:list="tasks"></tasks> 
 
    </div> 
 

 
    <template id="tasks-template"> 
 
     <ul> 
 
      <li :class="{'completed' : task.c}" @click = "task.c = ! task.c" v-for ="task in tasks">{{task.t}}</li> 
 

 
     </ul> 
 

 
    </template> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
 
    <script type="text/javascript"> 
 

 
    vue.component('tasks', { 
 
    template: '#tasks-template', 
 

 
    props:['list'] // why not props:['tasks'] ?? 
 

 
    }); 
 

 
    new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     tasks: [ 
 
      {t: 'go to doctor', c: false}, 
 
      {t: 'go to work', c: false}, 
 
      {t: 'go to store', c: true} 
 
     ] 
 

 
    }