组件中，如果是父组件和后代组件通讯

[codeforsome]

组件中，如果是父组件和后代（孙组件）组件通讯，只能一层一层通过proto传递的通讯吗

[kirakiray]

还有下面几个方案：

• 如果父组件和后代组件，需要共享某个属性，可以共享状态；
• 后代组件可以用 emit 方法 进行事件冒泡，通知父组件，记得添加composed参数；

<!--父组件-->
<template component>
<div class="container" on:custom-event="someFunc">
   <!--存放后代组件的地方-->
   ...
</div>
<script>
...
proto:{
  someFunc(event){
     const {
       data // 获得到的数据
     } = event;
     
     // do something
  }
}
...
</script>
</template>

<!--后代组件-->
<template component>
<button on:click="haha">Click Me</button>
<script>
...
proto:{
  haha(){
    this..emit("custom-event",{
        composed: true,
        data:{
          // 你的自定义数据
        }
    });
  }
}
...
</script>
</template>

[kirakiray]

还有几个比较粗暴的方法，直接通获取后代组件或父组件，进行交互：

• 后代组件主动与父组件互动，通过 host 查找;

<!--父组件-->
<template component>
<script>
...
proto:{
  xxxx(data){
     // do something
  }
}
...
</script>
</template>

<!--后代组件-->
<template component>
<button on:click="haha">Click Me</button>
<script>
...
tag:"sub-ele",
proto:{
  haha(){
     this.host.xxxx('some data'); // 直接让一级父组件运行它的方法
     // this.host.host.xxxx('some data'); // 直接让二级父组件运行它的方法，以此类推
  }
}
...
</script>
</template>

• 父组件主动和后代组件互动，通过 shadow 查找；

<!--父组件-->
<template component>
<button on:custom-event="someFunc">主动运行后代组件的方法</button>
<div class="container">
   <!--存放后代组件的地方-->
   <sub-ele></sub-ele>
   ...
</div>
<script>
...
proto:{
  someFunc(event){
    this.shadow.$('sub-ele').xxxx('some data'); // 直接运行子组件的方法
    // this.shadow.$('sub-ele').shadow.$('sub-ele-two').xxxx('some data'); // 多级查找子组件，并主动运行方法，以此类推
  }
}
...
</script>
</template>

[kirakiray]

从4.5.0 开始，可以使用 o-provider 和 o-context 来在组件间传递数据，使用起来很像 react 的 context 和 consumer。

由于官网还在重构中，当前 api 需要查看测试用例来参考使用。

https://github.com/kirakiray/ofa.js/tree/main/test/cases/context

[kirakiray]

当 ofa.js 版本更新至 4.5.0 以上时，可以通过使用 <o-provider> 标签，并为其添加 name 属性来定义其数据空间。在同一个 <o-provider> 标签下的所有具有相同 name 属性值的 <o-consumer> 组件，均能够获取到该 <o-provider> 所提供的所有数据。

示例代码如下：

...
    <l-m src="./comp-one.html"></l-m>

    <o-provider name="yourKey" custom-a="I am A" custom-b="I am B">
      <comp-one></comp-one>
      <div>
        <o-consumer name="yourKey">consumer child</o-consumer>
      </div>
    </o-provider>
...

在子组件内部，我们可以通过在 <o-consumer> 标签上使用 watch:xxx 语法来监听特定属性的变化，并将这些变化绑定到组件的数据模型上。

例如，在 comp-one.html 文件中，可以这样实现：

<!-- comp-one.html -->
<template component>
  <o-consumer name="yourKey" watch:custom-a="ca">
    provider in shadow
  </o-consumer>
  <script>
    export default {
      tag: 'comp-one',
      data: {
        ca: null, // 初始值设置为 null
      },
    };
  </script>
</template>

上述代码中，<o-consumer> 组件通过 watch:custom-a 监听了来自 <o-provider> 的 customA 属性的变化，一旦顶层的 o-provider 的 customA 发生变化，ca 数据属性将会自动更新以反映这一变化。这使得子组件能够动态地响应父级组件传递的数据变动，从而实现更加灵活和高效的组件间通信。