未验证 提交 5e61c041 编写于 作者: D duangavin123 提交者: Gitee

rename zh-cn/third-party-cases/how-to-bind-different-operations-for-one-component.md

Signed-off-by: Nduangavin123 <duanxichao@huawei.com>
Signed-off-by: Nduangavin123 <duanxichao@huawei.com>
上级 aeb8e803
## 如何为同一组件在不同场景下绑定不同的业务逻辑
# 如何为同一组件在不同场景下绑定不同的业务逻辑
### 场景介绍
## 场景介绍
我们在应用开发过程中经常遇到这样的场景:在不同的地方需要呈现同样的UI效果,为了简化处理,我们往往会把对应的UI元素封装成自定义组件,然后在用到的地方进行调用。但是,通常情况下,UI展示往往伴随着动态交互,而且在不同场景下需要做不同的交互处理。
*比如:A、B两个页面都有返回按钮,但是在A页面中点击返回按钮是返回上一页,在B页面点击返回按钮是直接退出当前应用。同样是点击返回按钮,但是业务处理逻辑是不同的。*
那么在不同场景下调用同一组件的时候如何实现不同的交互逻辑呢?这就引出了本文要讲的内容。
### 实现思路
## 实现思路
要使同一组件实现不同效果,我们很容易就想到通过变量传参进行控制,而不是直接在程序中采用固定值,这样我们就可以根据不同场景传入不同参数从而实现不同效果。
我们通常使用传参的方式改变组件的属性,比如:大小、边框、背景色、字体等等,同样的,我们也可以通过传参的方式改变组件绑定的业务逻辑,只不过,此时我们传入的是方法,然后在对应方法中写入具体的业务逻辑。
接下来我们用一个简单的例子讲解如何实现。
### 开发示例
## 开发示例
本示例将在一个页面中两次引用同一个按钮,然后为两次引用加入不同的处理逻辑,第一次引用中,点击按钮跳转到‘’Hello World!’‘页面;第二次引用中,点击按钮跳转到’‘Hello ArkTS!’‘页面。
#### 环境要求
### 环境要求
- IDE:DevEco Studio 3.1 Beta1
- SDK:Ohos_sdk_public 3.2.11.9 (API Version 9 Release)
#### 开发步骤
### 开发步骤
1. 创建按钮组件
首先,让我们创建被引用的按钮组件。
这里需要注意的是,由于按钮要绑定不同的处理逻辑,所以我们在点击事件中不要写入固定的处理逻辑,而是传入一个自定义的空方法,该方法的逻辑在父组件中实现,然后传入。具体代码如下:
......@@ -94,7 +94,7 @@
![相同子组件不同业务逻辑](figures/different-operations-one-component.gif)
### 完整代码
## 完整代码
示例完整代码如下:
```ts
import router from '@ohos.router'
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册