Vue3 知识点记录（一）：组件间通信非 Prop 的 Attribute 当我们传递给一个组件某个属性，但是该属性并没

父子组件之间的通信

props

非 Prop 的 Attribute

当我们传递给一个组件某个属性，但是该属性并没有定义对应的 props 或者 emits 时，就称之为非 Prop 的 Attribute

常见的包括 class、style、id 属性等。

Attribute 的继承

当组件只有单个的根节点时，非 Prop 的 Attribute 会自动添加到根节点的 Attribute 中。

如果我们不希望组件的根元素继承 attribute，可以在组件中设置 inheritAttrs: false

禁用 attribute 继承的常见情况是需要将 attribute 应用于根元素之外的其他元素
我们可以通过 $attrs 来访问所有的非 props 的 attribute

自定义事件

非父子组件之间的通信

provide/inject

provide/inject 用于非父子组件之间共享数据，比如有一些深度嵌套的组件，子孙组件想要获取父组件的数据，在这种情况下，如果我们仍然将 props 沿着组件链逐级传递下去，就会非常的麻烦。

对于这种情况下，我们就可以使用 provide 和 inject

父组件使用 provide 选项来提供数据
子孙组件通过 inject 选项来使用这些数据
无论层级结构有多深，父组件都可以作为其所有子孙组件的依赖提供者

实际上，你可以将依赖注入看作是 “long range props”，不同点在于：

父组件不需要知道哪些子组件使用它 provide 的 property
子组件不需要知道 inject 的 property 来自哪里

provide/inject 的基本使用

  // 在父组件中
  export default {
     // 通过对象的形式来传递
     provide: {
        name: 'zs',
        age: 18
     }
  }
  // 子孙组件中
  export default {
     inject: ['name', 'age']
  }

如果 provide 传递的数据来自 data，则需要写成函数形式：

  // 在父组件中
  export default {
     data() {
       return {
         list: ['abc', 'cba', 'ccc']
       }
     },
     // 写成函数形式
     provide() {
       return {
         length: this.list.length
       }
     }
  } 
  // 子孙组件中
  export default {
     inject: ['length']
  }

Vue3 知识点记录（一）：组件间通信