Vue 2.0 Laravel 5.3 Parent Child 与插槽的关系

Question

我有一个项目，当我点击 parent item-sorting-list 上的锚点时，child item-card 的属性会发生变化，因此它会进行排序基于那个属性。但是数据似乎没有传递给 child。我想知道我在同时建立parent child关系时是否有什么问题？

模板 (item-sorting-list)

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

方法（item-sorting-list）

methods: {

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

当我点击 subcat.name 时，它确实将 subcat.name 存储到 item-sorting-list 组件中的 selectedSubcat（从 Vue devtool 验证）。问题是 item-card 不存储它，即使我把 selectedSubcat 作为 props

HTML（这里是parentchild关系吗？）

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

已更新 item-card

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中，我会说这意味着它们是parent child关系吗？但是当我单击 item-sorting-list 中的某些内容并更改 selectedSubcat 时，item-sorting-list 中的 selectedSubcat 确实发生了变化，但 item-card 中的 selectedSubcat 仍未定义。抱歉我的英语不好。

更新2

我注意到我在网上找到的每个示例都是在 new Vue 中设置 selectedSubcat 并在其中设置 el="#app" 而不是任何其他组件（在我的例子中 item-sorting-list).那有关系吗？我觉得

中的 :selected-subcat="selectedSubcat

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

无法读取我在组件 item-sorting-list 中定义的 selectedSubcat 但是如果我在下面的

中设置 selectedSubcat

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

它确实将 selectedSubcat 读作 1。所以我要说的是 item-card 不会将 item-sorting-list 视为它的 parent。但是为什么以及如何才能让它成为 item-card 的 parent？ [注意：但在 Vue devtool 中，树确实显示 item-sorting-list 确实由 item-card 组成，item-card 在单击item-sorting-list]

左侧

Answer 1

在 VueJs 中，当您没有全局注册一个 vue 组件时，您有 parent child relation，但是您通过向组件注册一个组件使其仅在另一个 instance/component 的范围内可用实例选项，如下所示：

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 传递给 child 组件 item-card。 parent 上数据的动态属性确保每当数据在 parent 中更新时，它也会向下流到 child：

您可能必须将其传递给 child，如下所示：

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

您还必须像这样在 item-list 中添加道具：

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

注意我已经将它转换为 kebab-case，因为 HTML 是 case-insensitive，驼峰命名的道具名称需要使用它们的 kebab-case (hyphen-delimited) 等价物(Documentation).

Vue 2.0 Laravel 5.3 Parent Child 与插槽的关系

Vue 2.0 Laravel 5.3 Parent Child relationship with slot

laravel-5.3

vuejs2