华为快应用-父子组件的通信(父传子)

简介: 华为快应用-父子组件的通信(父传子)

父子组件传递信息有两种方法:

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;
        },
目录
相关文章
|
4月前
|
JavaScript
在Vue中,父组件和子组件之间是如何通信的?
在Vue中,父组件和子组件之间是如何通信的?
36 3
|
2月前
|
前端开发
uniapp 数据父传子
在uni-app中,父组件向子组件传递数据主要通过属性绑定的方式实现。这里提供一个简单的示例来说明如何进行父传子的数据传递:
29 1
uniapp 数据父传子
|
2月前
|
JavaScript
数据共享方式,父组件向子组件共享数据,子向父,兄弟,Vuex
数据共享方式,父组件向子组件共享数据,子向父,兄弟,Vuex
|
4月前
|
前端开发
React数据通信父传子和子传父的使用
React数据通信父传子和子传父的使用
|
4月前
|
JavaScript
vue父子组件之间通讯方式
vue父子组件之间通讯方式
24 2
|
4月前
|
JavaScript
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
40 0
组件之间传值通讯之父传子
组件之间传值通讯之父传子
|
JavaScript 编译器
【Vue3 第十四章】父子组件通信
【Vue3 第十四章】父子组件通信
147 0
|
JavaScript
Vue中父组件与子组件之间的通信
Vue中父组件与子组件之间的通信
183 0
华为快应用-父子组件的通信(子传父)
华为快应用-父子组件的通信(子传父)
179 0