@State状态声明的变量发生改变后，子组件UI没有发生变化

本帖最后由 hyacinth养花人 于 2023-11-14 14:17 编辑

页面内写了一个webview组件和一个自定义的TitleBar组件，@State的title传递给TitleBar显示，当网页加载完成后，回调onTitleReceive，给@State的title赋值，但是UI没有更新，请问是什么问题呢？

@State装饰器的作用只是在当前组件中，而你把title传递给了自定义的子组件，所以你需要使用 @Prop装饰器 装饰子组件TitleBar中的title变量，这样可以与父组件中的 @State title 建立单向同步，当然也可以使用 @Link 建立双向同步！

双向绑定应该使用@Link

1. // xxx.ets
   
2. import web_webview from '@ohos.web.webview'
   
3. 
   
4. @Entry
   
5. @Component
   
6. struct WebComponent {
   
7.   controller: web_webview.WebviewController = new web_webview.WebviewController();
   
8.   @State title: string = '标题'
   
9. 
   
10.   build() {
    
11.     Column() {
    
12.       TitleBar({title: this.title})
    
13. 
    
14.       Web({ src: 'www.openharmony.cn', controller: this.controller })
    
15.         .onTitleReceive((event) => {
    
16.           this.title = event.title
    
17.         })
    
18.     }
    
19.   }
    
20. }
    
21. 
    
22. @Component
    
23. struct TitleBar{
    
24.   @Link title:string;
    
25.   build(){
    
26.    Column(){
    
27.      Text(this.title)
    
28.        .fontSize(30)
    
29.    }
    
30.     .width('100%')
    
31.     .height(50)
    
32.     .backgroundColor('#f7f8fa')
    
33.     .padding({top: 10, bottom: 10})
    
34.   }
    
35. }
    

复制代码