Vue父组件属性的继承

一、钩子

在父组件mounted时，子组件已经全部mounted完毕

  mounted() {
    this.$children.forEach(vm => {
        //
    });
  }

二、name属性的两个作用

1. 使用vue开发者工具，了解文件构成

2. vm.$options.name === "yibo-side" 使用$options.name来筛选父组件是否有该子组件

  mounted() {
    this.$children.forEach(vm => {
      if (vm.$options.name === "yibo-side") {
        this.layoutClass.hasSide = true;
      }
    });
  }

三、父组件的属性的继承

要把父组件上的数据加到子组件上，利用了箭头函数静态this的特性

  mounted() {
    this.$children.forEach(vm => {
      vm.gutter = this.gutter;
    });
  },

最后我们只需要在父组件上写属性即可

      <g-row gutter="20">
        <g-col>1</g-col>
        <g-col>1</g-col>
      </g-row>

相当于给他们三个写了gutter属性

四、筛选子组件

除了上面提到的方法，还有一种方法可以筛选子组件

mounted() {
        for (let node of this.$el.children) {
            let name = node.nodeName.toLowerCase();
            if (name !== 'button') {
               console.warn(`g-button-group 的子元素应该全是 g-button，但是你写的是 ${name}`)
            }
        }
    }