LWC Parent & Child Cmp & cmp

标签：Parent Child child 组件 LWC cmp event Cmp

1. Parent & Child  ：Parent–Child Communication in Lightning Web Component (LWC) / Blogs / Perficient

也可以通过Dom的形式接收值；

 上述链接中的例子比较简单，可以参考下述例子

Events in Lightning web components (LWC) - Apex Hours

parent to child :两种方式：

1.

<c-todo-item item-name="Milk"></c-todo-item>  直接html 中传值 2.  Parent 中 onchange 事件引用子组件的方法直接赋值  ： this.template.querySelector('c-child-Comp').alertMessage(event.target.value);

child to parent 两种方式：

1. child 定义customer Event ,dispatchEvent 后

 

 <c-child-comp onmycustomevent={handleCustomEvent}></c-child-comp>  通过parent 的引用子组件，那么会很轻松获取到子的内容     handleCustomEvent(event) {         const textVal = event.detail;         this.msg = textVal;     }

2. 

child 端 发起Event

 Parent 捕获Event 后，将信息指定到方法中：

 

 

2. 组件与组件间的关系：Message Channel 

标签：Parent,Child,child,组件,LWC,cmp,event,Cmp
From： https://www.cnblogs.com/bandariFang/p/17143694.html