华为快应用-父子组件的通信（父传子）

最新推荐文章于 2024-12-31 15:05:19 发布

原创最新推荐文章于 2024-12-31 15:05:19 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#父子组件传值 #快应用

华为快应用同时被 2 个专栏收录

18 篇文章

订阅专栏

带你走进华为快应用

18 篇文章

订阅专栏

本文介绍了在前端开发中，父子组件间两种常见的通信方式：属性传值和广播传值。属性传值通过子组件声明props接收父组件传递的数据，而广播传值则利用事件机制实现从父到子的数据推送。

父子组件传递信息有两种方法：
1.属性传值；
2.广播传值；

1）属性传值相对简单，即在子组件中用props声明属性，然后在父组件中使用时进行赋值，说起来简单，下面来说说具体怎么用：

//子组件 child.ux
props: [
      'name',
      'age'
       ]

//父组件内使用子组件
<child name="{{user_name}}" age="{{user_age}}"> </child>
然后可以对括号中的变量进行操作赋值，这样就完成了对子组件的传值操作。

2）广播传值
在父组件中：

//在你需要触发的地方写
 this.$broadcast("evtType1",{'infro': "华为快应用"});

在子组件中：

        onInit:function() {
            //注册通知
            this.$on('evtType1', this.evtTypeHandler)
        },
        data () {
            return {
                //这是变量名
                changeStr: '默认'
            }
        },
        evtTypeHandler(evt) {
            console.info('子组件：事件响应: ', evt.type, evt.detail)
            // 结束事件传递
            // evt.stop() 如果你希望只传递一次，就写上这句话，如果需要多次传递就千万不能写
            //给变量赋传递过来的值
            this.changeStr = evt.detail.changeStr;
        },