init

xhs-mini-demos/component-case/component-communication/components/com1/com1.css

@@ -0,0 +1,6 @@
+.com1-container {
+    background-color: blue;
+    margin: 20px;
+    height: 500px;
+    color: white;
+}

xhs-mini-demos/component-case/component-communication/components/com1/com1.js

@@ -0,0 +1,40 @@
+Component({
+  options: {
+    styleIsolation: 'shared'
+  },
+  properties: {
+    
+  },
+  data: {
+    childDataMessage: '',
+    // 这里是一些组件内部数据
+    childMessage: '',
+    someData: {}
+  },
+  methods: {
+    handleClick() {
+      const com2 = this.selectComponent('#com2');
+      console.log('com2', com2);
+    },
+
+    handleEventMessage() {
+      this.setData('childDataMessage', '修改了传给子组件的data');
+    },
+    
+    onChildMessage(e) {
+      this.setData('childMessage', `收到子组件的事件detail：${e.detail.data}`);
+    },
+
+    onClear() {
+      console.log('onClear', this);
+      this.setData('childMessage', '');
+      this.setData('childDataMessage', '');
+    },
+
+    handleSelectMessage() {
+      const com2 = this.selectComponent('#com2');
+      com2.onTap();
+    }
+  },
+});
+  

xhs-mini-demos/component-case/component-communication/components/com1/com1.json

@@ -0,0 +1,8 @@
+{
+    "component": true,
+    "usingComponents": {
+        "com2": "../com2/com2"
+    },
+    "styleIsolation": "apply-shared"
+  }
+  

xhs-mini-demos/component-case/component-communication/components/com1/com1.xhsml

@@ -0,0 +1,9 @@
+<view class="com1-container" bindtap="handleClick">
+    <view style="text-align: center;">这是父组件</view>
+    <view style="text-align: center;">{{childMessage}}</view>
+    <com2 id="com2" bindmyevent="onChildMessage" message="{{childDataMessage}}"/>
+    <view class="_ui-space _px10">
+        <button class="_ui-button" hover-class="_ui-button-hover" bindtap="handleEventMessage">通过data变更修改子组件</button>
+        <button class="_ui-button" hover-class="_ui-button-hover" bindtap="handleSelectMessage">通过selectComponent触发子组件事件</button>
+    </view>
+</view>