• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 如何为同一组件在不同场景下绑定不同的业务逻辑
2
3## 场景介绍
4在应用开发过程中经常遇到这样的场景：在不同的地方需要呈现同样的UI效果，为了简化处理，往往会把对应的UI元素封装成自定义组件，然后在用到的地方进行调用。但是，通常情况下，UI展示往往伴随着动态交互，而且在不同场景下需要做不同的交互处理。
5
6*比如：A、B两个页面都有返回按钮，但是在A页面中点击返回按钮是返回上一页，在B页面点击返回按钮是直接退出当前应用。同样是点击返回按钮，但是业务处理逻辑是不同的。*
7那么在不同场景下调用同一组件的时候如何实现不同的交互逻辑呢？这就引出了本文要讲的内容。
8
9## 实现思路
10要使同一组件实现不同效果，我们很容易就想到通过变量传参进行控制，而不是直接在程序中采用固定值，这样就可以根据不同场景传入不同参数从而实现不同效果。
11通过传参的方式改变组件的属性，比如：大小、边框、背景色、字体等等，同样的，也可以通过传参的方式改变组件绑定的业务逻辑，只不过此时传入的是含有业务逻辑的方法。
12接下来我们用一个简单的例子讲解如何实现。
13
14## 开发示例
15
16本示例将在一个页面中两次引用同一个按钮，然后为两次引用加入不同的处理逻辑，第一次引用中，点击按钮跳转到“Hello World!”页面；第二次引用中，点击按钮跳转到“Hello ArkTS!”页面。
17
18### 环境要求
19- IDE：DevEco Studio 3.1 Beta1
20- SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release)
21
22### 开发步骤
231. 创建按钮组件
24
25    首先，创建被引用的按钮组件。
26    这里需要注意的是，由于按钮要绑定不同的处理逻辑，所以我们在点击事件中不要写入固定的处理逻辑，而是传入一个自定义的空方法，该方法的逻辑在父组件中实现，然后传入。具体代码如下：
27    ```ts
28    @Component
29    struct ChildComponent{
30      @State button_text:string = 'hi'
31      // 定义一个空函数
32      child_func:()=>void
33      build(){
34        Button(`${this.button_text}`)
35          .height(100)
36          .width(200)
37          .onClick(() => {
38            // 在组件的点击事件中绑定之前定义的空函数
39            this.child_func()
40        })
41      }
42    }
43    ```
44
452. 在父组件中引用按钮组件
46
47    接下来，我们在父组件中引用两次第1步中创建的按钮组件。具体代码如下：
48    ```ts
49    @Entry
50    @Component
51    struct  FuncTransition{
52      build() {
53        Column(){
54          // 引用按钮组件
55          ChildComponent({button_text:'Hello World'})
56            .margin(50)
57          ChildComponent({button_text:'Hello ArkTS'})
58        }
59        .width('100%')
60        .height('100%')
61        .justifyContent(FlexAlign.Center)
62      }
63    }
64    ```
65
663. 在父组件中传入处理逻辑
67
68    以上两步已经把页面框架搭好了，接下来给按钮组件传入处理逻辑，这也是最重要的一步。
69    在第1步中为按钮组件的点击事件绑定了一个空函数，现在我们在父组件中创建一个带有具体处理逻辑的函数，并将其传入按钮组件中。在父组件中可以通过为同一函数传入不同参数来为两个按钮组件绑定不同逻辑，也可以通过不同函数来实现，本例中采用前者进行实现。具体代码如下：
70    ```ts
71    import router from '@ohos.router'
72    @Entry
73    @Component
74    struct  FuncTransition{
75      // 在父组件中创建逻辑处理函数，此处逻辑为页面跳转。
76      parent_func(page_url){
77        router.pushUrl({
78          url:page_url
79        })
80      }
81      build() {
82        Column(){
83          // 在第1处引用的子组件中传入父组件中定义的函数，此处为跳转到''Hello World!''页面
84          ChildComponent({child_func:()=>{this.parent_func('pages/HelloWorld')},button_text:'Hello World'})
85            .margin(50)
86          // 在第2处引用的子组件中传入父组件中定义的函数，此处为跳转到''Hello ArkTS!''页面
87          ChildComponent({child_func:()=>{this.parent_func('pages/HelloArkTS')},button_text:'Hello ArkTS'})
88        }
89        .width('100%')
90        .height('100%')
91        .justifyContent(FlexAlign.Center)
92      }
93    }
94    ```
95
96    通过以上步骤我们实现了在为同一按钮组件绑定不同的业务处理逻辑，接下来看下效果吧！
97    注意：文中的“Hello World!”页面和“Hello ArkTS!”页面不是本文说明的重点，所以本文中不做开发介绍。
98
99    ![相同子组件不同业务逻辑](figures/different-operations-one-component.gif)
100
101## 完整代码
102示例完整代码如下：
103```ts
104import router from '@ohos.router'
105@Entry
106@Component
107struct  FuncTransition{
108  parent_func(page_url){
109    router.pushUrl({
110      url:page_url
111    })
112  }
113  build() {
114    Column(){
115      ChildComponent({child_func:()=>{this.parent_func('pages/HelloWorld')},button_text:'Hello World'})
116        .margin(50)
117      ChildComponent({child_func:()=>{this.parent_func('pages/HelloArkTS')},button_text:'Hello ArkTS'})
118    }
119    .width('100%')
120    .height('100%')
121    .justifyContent(FlexAlign.Center)
122  }
123}
124
125@Component
126struct ChildComponent{
127  @State button_text:string = 'hi'
128  child_func:()=>void
129  build(){
130    Button(`${this.button_text}`)
131      .height(100)
132      .width(200)
133      .onClick(() => {
134        this.child_func()
135    })
136  }
137}
138```