问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

子组件使用@Link修饰成员变量时，如何通过父组件传值?

头像
HarmonyOS码上奇行
    12k4153

    子组件使用@Link修饰成员变量时，如何通过父组件传值

    HarmonyOSharmonyosharmonyos-next
    阅读 565
    avatarAI BotBETA

    子组件使用@Link修饰成员变量时，可以通过父组件传值。具体来说，可以在父组件中定义一个属性，并将其传递给子组件。在子组件中，可以使用@Link修饰符将该属性与成员变量关联起来。

    以下是一个示例代码，展示了如何实现这个过程：

    父组件代码示例：

    <template>
  <div>
    <my-child :value="parentValue"></my-child>
  </div>
</template>

<script>
import MyChild from './MyChild.vue';

export default {
  components: {
    MyChild,
  },
  data() {
    return {
      parentValue: 'Hello from parent',
    };
  },
};
</script>

    子组件代码示例：

    <template>
  <div>
    <p>{{ value }}</p>
  </div>
</template>

<script>
export default {
  props: ['value'],
};
</script>

    在父组件中，我们定义了一个名为parentValue的属性，并将其传递给子组件。在子组件中，我们使用props选项将value属性绑定到value成员变量上。通过这种方式，我们可以在父组件中向子组件传递值，并在子组件中使用该值。

    1 个回答
    得票最新
    头像
    HarmonyOS码上奇行
      12k4153

      @Link子组件从父组件初始化@State的语法为Comp({ aLink: this.aState })或Comp({aLink: $aState})。
      @Link语义是从'$'操作符引出，即isPlaying是this.isPlaying内部状态的双向数据绑定。
      当单击子组件PlayButton中的按钮时，@Link变量更改，PlayButton与父组件中的Text和Button将同时进行刷新，同样地，当点击父组件中的Button修改this.isPlaying时，子组件PlayButton与父组件中的Text和Button也将同时刷新。

      代码示例

      1. 在父组件使用@State装饰器，传递数据使用$符创建引用。
      @Entry 
@Component 
struct Player { 
  @State isPlaying: boolean = false 
  build() { 
 
    Column() { 
      PlayButton({ buttonPlaying: $isPlaying }) 
      Text(`Player is ${this.isPlaying ? '' : 'not'} playing`) 
        .fontSize(18) 
      Button('Parent:' + this.isPlaying) 
        .margin(15) 
        .onClick(() => { 
          this.isPlaying = !this.isPlaying; 
        }) 
    } 
  } 
}
      1. 在子组件使用@Link接受数据。
      @Component 
struct PlayButton { 
  @Link buttonPlaying: boolean 
 
  build() { 
    Column() { 
      Button(this.buttonPlaying ? 'pause' : 'play') 
        .margin(20) 
        .onClick(() => { 
          this.buttonPlaying = !this.buttonPlaying; 
        }) 
    } 
  } 
}

      参考链接

      @Link装饰器

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题