_island Record

Appearance

组件之间的通信方式有哪些 ​

父组件向子组件传递数据 ​

  • props属性传值，子组件中定义接收的props，父组件将对应的props属性写在子组件标签上即可完成传递
  • provide和inject，通过provide可以向后代组件进行传递数据，后代组件需要使用inject接收上级组件传递过来的数据

子组件向父组件传递从数据 ​

  • $emit，子组件通过emit事件传递参数，父组件接收子组件传递过来的事件和参数

互相通讯 ​

  • 事件总线（Vue2），Vue本身也可以是一个事件总线，可以发布订阅事件
  • Vuex、pinia 通过数据共享的方式，双方组件都可以实时获取到共享数据

parent、children ​

  • $parent，通过this.$parent访问父级组件的实例
  • $children，通过children让组件访问子组件实例中的属性和方法，注意访问到的数据并不是响应式数据

ref ​

通过ref的方式直接获取访问子组件中的属性和方法

WARNING

注意，在Vue3中，子组件需要定义defineExpose宏才能被父组件访问到

inheritAttrs ​

例如现在有一个场景是这样子的

下面component，就简写成CMP吧

CMP1->CMP2->CMP3，如果这个时候CMP1要传递数据给CMP3，可能需要通过一层层props来传递（没有provide和inject的情况下），Vue有个inheritAttrs-Api，允许将没有被props解析的属性被“透传”到子组件中。而这些子组件可以通过$attrs进行获取

html
<component1>
    <component2>
        <component3>
        </component3>
    </component2>
</component1>

inheritAttrs

TIP

如果是事件传递，可以通过$listeners将接收到的事件传递到子组件中