/**
 * @State:组件内部状态
 */
@Component
struct StateDemo {
  @State count: number = 0;
  @State name: string = '张三';
  @State visible: boolean = false;
  
  build() {
    Column({ space: 12 }) {
      Text(`计数: ${this.count}`)
        .fontSize(18)
      
      Button('增加')
        .onClick(() => {
          this.count++; // 修改状态会触发UI更新
        })
      
      TextInput({ text: this.name })
        .onChange((value: string) => {
          this.name = value; // 双向绑定
        })
    }
    .padding(20)
  }
}
​
/**
 * @Link:父子双向绑定
 */
@Component
struct ChildComponent {
  @Link count: number; // 使用@Link接收
  
  build() {
    Column({ space: 8 }) {
      Text(`子组件显示: ${this.count}`)
      Button('子组件增加')
        .onClick(() => {
          this.count++; // 修改会同步到父组件
        })
    }
  }
}
​
@Component
struct ParentComponent {
  @State count: number = 0;
  
  build() {
    Column({ space: 12 }) {
      Text(`父组件显示: ${this.count}`)
      
      Button('父组件增加')
        .onClick(() => {
          this.count++;
        })
      
      // 使用$传递引用
      ChildComponent({ count: $count })
    }
    .padding(20)
  }
}
​
/**
 * @Provide/@Consume:跨层级传递
 */
@Entry
@Component
struct GrandParent {
  @Provide('theme') theme: string = 'light';
  @Provide('fontSize') fontSize: number = 16;
  
  build() {
    Column({ space: 16 }) {
      Text('祖父组件')
        .fontSize(20)
      
      Button('切换主题')
        .onClick(() => {
          this.theme = this.theme === 'light' ? 'dark' : 'light';
        })
      
      Parent()
    }
    .padding(20)
  }
}
​
@Component
struct Parent {
  build() {
    Column({ space: 12 }) {
      Text('父组件(不需要接收theme)')
      Child()
    }
  }
}
​
@Component
struct Child {
  @Consume('theme') theme: string; // 直接从祖父组件获取
  @Consume('fontSize') fontSize: number;
  
  build() {
    Column({ space: 8 }) {
      Text('子组件')
        .fontSize(this.fontSize)
      Text(`当前主题: ${this.theme}`)
        .fontColor(this.theme === 'light' ? '#333' : '#fff')
    }
  }
}
​
/**
 * @Watch:监听状态变化
 */
@Component
struct WatchDemo {
  @State @Watch('onCountChange') count: number = 0;
  @State @Watch('onNameChange') name: string = '';
  
  onCountChange() {
    console.log('count变化了:', this.count);
    if (this.count > 10) {
      promptAction.showToast({ message: '计数超过10了!' });
    }
  }
  
  onNameChange() {
    console.log('name变化了:', this.name);
  }
  
  build() {
    Column({ space: 12 }) {
      Text(`计数: ${this.count}`)
      Button('增加').onClick(() => this.count++)
      
      TextInput({ placeholder: '输入姓名' })
        .onChange((value: string) => {
          this.name = value;
        })
    }
    .padding(20)
  }
}
​
/**
 * @Prop:单向传递
 */
@Component
struct PropChild {
  @Prop count: number; // 只读,不能修改
  
  build() {
    Column() {
      Text(`接收到的值: ${this.count}`)
      // this.count++ // 错误!不能修改@Prop
    }
  }
}
​
@Component
struct PropParent {
  @State count: number = 0;
  
  build() {
    Column({ space: 12 }) {
      Button('父组件增加').onClick(() => this.count++)
      PropChild({ count: this.count }) // 直接传值
    }
  }
}
​
/**
 * @ObjectLink:对象双向绑定
 */
@Observed
class Person {
  name: string;
  age: number;
  
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
​
@Component
struct ObjectLinkChild {
  @ObjectLink person: Person;
  
  build() {
    Column({ space: 8 }) {
      Text(`姓名: ${this.person.name}`)
      Text(`年龄: ${this.person.age}`)
      Button('增加年龄')
        .onClick(() => {
          this.person.age++; // 修改会同步到父组件
        })
    }
  }
}
​
@Component
struct ObjectLinkParent {
  @State person: Person = new Person('张三', 25);
  
  build() {
    Column({ space: 12 }) {
      Text(`父组件: ${this.person.name}, ${this.person.age}岁`)
      ObjectLinkChild({ person: this.person })
    }
    .padding(20)
  }
}