开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天，点击查看活动详情

vue组件开发，组件间通信

组件参数限定具体值。

例如按钮的size一般有small normal 和large三个属性可以选择

// 判断参数是否是其中之一
  function oneOf (value, validList) {
    for (let i = 0; i < validList.length; i++) {
      if (value === validList[i]) {
        return true;
      }
    }
    return false;
  }
  
   export default {
    props: {
      size: {
        validator (value) {
          return oneOf(value, ['small', 'large', 'normal']);
        },
        default: 'normal'
      },
    }
  }

inheritAttrs: false

默认情况组件中用到的所有属性不仅仅包含配置在props的属性，还包含组件中用到的其他组件所需的属性。比如组件中有button按钮。那我们传button的属性也是可以的，但是若加上 inheritAttrs: false就不会继承原生button属性。

$parent 和 $children ref

ref访问组件实例 $parent 和 $children访问父子实例

ref访问子组件实例

<template>
  <component-a ref="comA"></component-a>
</template>
<script>
  export default {
    mounted () {
      const comA = this.$refs.comA;
      console.log(comA.title);  // Vue.js
      comA.sayHello();  // 弹窗
    }
  }
</script>

子组件中直接调用 let parent = this.$parent;来获取父组件实例

provide / inject

provide和react用法基本一致。 就是在最上层router-view中provide想子组件访问到的内容。这样无论子组件还是孙子组件，孙子组件兄弟组件全部可以访问provide中的内容 用以解决想要获取子组件的爷爷组件实例的情况。

因为this.$parent;不确定到底第几层是我们想要获取的父组件实例

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    provide () {
      return {
        app: this
      }
    }
  }
</script>

其他任何页面可以直接获取app实例。 通过app实例可以获取app.vue中的方法，data等内容 如访问data对象app.userInfo

<script>
  export default {
    inject: ['app']
  }
</script>

如果用$parent可能会是这样

  realParent () {
    let parent = this.$parent;
    while (parent.$options.name !== '想要找的父组件名称') {
      parent = parent.$parent;
    }
    return parent;
  }

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天，点击查看活动详情