init

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

@@ -0,0 +1,6 @@
+.page-continer {
+  background-color: red;
+  margin: 10px;
+  height: 650px;
+  color: white;
+}

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

@@ -0,0 +1,9 @@
+Page({
+  data: {},
+
+  onClearClick() {
+    const com1 = this.selectComponent('#com1');
+    console.log('com1', com1.onClear);
+    com1.onClear();
+  },
+});

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

@@ -0,0 +1,9 @@
+{
+    "navigationBarTitleText": "组件间通信与事件",
+    "usingComponents": {
+        "showbox": "../../common/component/showbox/index",
+        "box": "../../common/component/container/index",
+        "com1": "./components/com1/com1",
+        "com2": "./components/com2/com2"
+    }
+}

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

@@ -0,0 +1,11 @@
+<view class="container">
+  <view class="page-continer">
+    这是页面
+    <com1 id="com1" />
+    <view class="_px10">
+      <button hover-class="_ui-button-hover" bindtap="onClearClick">
+        通过selectComponent clear
+      </button>
+    </view>
+  </view>
+</view>

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>

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

@@ -0,0 +1,6 @@
+.com2-container {
+    background-color: yellow;
+    margin: 20px;
+    height: 250px;
+    color: black;
+}

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

@@ -0,0 +1,26 @@
+Component({
+  properties: {
+    message: {
+      type: String
+    }
+  },
+  data: {
+    // 这里是一些组件内部数据
+    someData: {}
+  },
+  methods: {
+    onTap() {
+      this.triggerEvent('myevent', {
+        data: '自定义组件内触发triggerEvent'
+      });
+    },
+
+    onClear() {
+      console.log('onClear com2', this);
+      this.triggerEvent('myevent', {
+        data: ''
+      });
+    }
+  }
+});
+  

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

@@ -0,0 +1,5 @@
+{
+    "component": true,
+    "styleIsolation": "apply-shared"
+  }
+  

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

@@ -0,0 +1,7 @@
+<view class="com2-container">
+    <view style="text-align: center;">这是子组件</view>
+    <view style="text-align: center;">{{message}}</view>
+    <view class="_ui-space _px10 _pt10">
+        <button class="_ui-button" hover-class="_ui-button-hover" bindtap="onTap">通过事件给父组件发消息</button>
+    </view>
+</view>