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-card включен в item-sorting-list, я бы сказал, что означает, что они являются родительскими отношениями с детьми? но тогда, когда я нажимаю что-то в item-sorting-list и меняю selectedSubcat, selectedSubcat в item-sorting-list меняет, но selectedSubcat в item-card остается неопределенным. Извините за мой плохой английский.

UPDATE2

Я заметил, что каждый пример, который я нашел в Интернете является то, что они устанавливают selectedSubcat в new Vue с el="#app" в нем вместо любого другого компонента (в моем случае item-sorting-list). Это имеет значение? Я чувствую, что :selected-subcat="selectedSubcat в

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

не может прочитать selectedSubcat что я определил в компоненте item-sorting-list, но вместо этого, если я установить selectedSubcat в следующем

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

он прочитал 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 является нечувствителен к регистру, camelCased проп именам должны использовать свои кебаб регистр (дефис-разделители) эквиваленты (Documentation).