Vue 2.0 Laravel 5.3父母與子女的關係

Question

我有一個項目，當我點擊父母項目排序列表中的一個錨點時，子項目卡的屬性將發生變化，因此它會根據該屬性對事物進行排序。然而，這些數據似乎並沒有傳遞給孩子。我想知道在此期間建立父母子女關係時是否有什麼錯誤？

模板（項目排序列表）

<a :name="subcat.name" href="" @click.prevent="getSelectedSubcat(subcat.name)">{{subcat.name}}</a> 

方法（項目排序列表）

methods: { 

     getSelectedSubcat(subcat){ 
     var vm = this; 
     vm.selectedSubcat = subcat 
     } 
    } 

當我點擊subcat.name，但它實際存儲subcat.name到selectedSubcat（驗證來自Vue devtool）item-sorting-list組件。問題是item-card不保存它，即使我把selectedSubcat道具

HTML（做這項工作作爲父子關係嗎？）

<item-sorting-list><item-card></item-card></item-sorting-list> 

修訂項卡

export default { 
    props:[ 
     'selectedSubcat' 
    ], 
    data(){ 
     return { 
     products:[], 
     } 
    }, 
    mounted() { 
     this.getAllProducts() 
    }, 
    methods: { 
     getAllProducts(){ 
     var vm = this; 
     vm.$http.get('/getProducts').then((response)=>{ 
      vm.products = response.data.data.products; 
     }); 
     } 
    } 
    } 

來自Vue devtool，項目卡包含在item-sorting-list中，我會說這意味着他們是父母的孩子關係？但後來當我點擊item-sorting-list中的內容並更改selectedSubcat時，selectedSubcat中的item-sorting-list確實發生了變化，但selectedSubcat中的selectedSubcat仍未定義。對不起，我的英語不好。

UPDATE2

我注意到，我在網上找到的每一個例子是，它們在new Vue於它，而不是任何其他成分（在我的情況item-sorting-list）設置selectedSubcat與el="#app"。這很重要嗎？我覺得像:selected-subcat="selectedSubcat在

<item-sorting-list> 
    <item-card :selected-subcat="selectedSubcat"></item-card> 
</item-sorting-list> 

無法讀取我在組件item-sorting-list定義的selectedSubcat，而是如果我在下面

const app = new Vue({ 
    el: '#app', 
    data:{ 
     selectedSubcat:1 
    } 
}); 

設置selectedSubcat它讀取selectedSubcat爲1。因此，我會說item-card不認爲item-sorting-list作爲它的父母。但爲什麼以及如何讓它成爲item-card的父母？ [注意：但在Vue公司devtool樹它只表示item-sorting-list不包括item-card，item-card點擊的item-sorting-list左側的箭頭之後確實顯示]

Answer 1

在VueJs，你有parent child relation，當你不全球註冊VUE成分，但你用的組件實例選項註冊它，就像下面讓僅在另一個實例/組件的範圍組件：

var Child = { 
    template: '<div>A custom component!</div>' 
} 
new Vue({ 
    // ... 
    components: { 
    // <my-component> will only be available in parent's template 
    'my-component': Child 
    } 
}) 

在你的情況，我沒有看到selectedSubcat傳遞作爲dynamic props給孩子組合ent item-card。動態道具數據父確保當數據在父更新，它也將流下來的孩子：

你可能有將它傳遞給孩子，就像下面：

<item-sorting-list> 
    <item-card :selected-subcat="selectedSubcat"></item-card> 
</item-sorting-list> 

也已經在你的item-list添加道具這樣的：

var itemList = { 
    props: ["selectedSubcat"] 
    template: '<div>Yout component!</div>' 
} 

通知我已經把它轉換到烤肉情況，因爲HTML是不區分大小寫，駝峯格式道具名稱需要使用他們的烤肉情況（連字符分隔）當量（Documentation ）。