收藏
回答

有没有大佬能讲一下父子组件传值使用的方法么?

萌新,看了一些学习文档,不太明白triggerevent到底是怎么用的,有没有大佬能详细的讲一下父子组件到底是怎么传值的?

回答关注问题邀请回答
收藏

1 个回答

  • 2020-06-19

    子组件:

    ----wxml:
    <view bindtap="handleClick">点我呀!</view>
    ----js:
    handleClick(){
     const object ={name:'我来自子组件'} 
     this.triggerEvent('myeventData'object)
    }
    

    父组件:

    第一处修改:

    在xxx.json中的usingComponents中设置要用到的子组件,例如:
    {
      "usingComponents": {
        "componentA""/components/子组件目录/子组件文件名"
      },
      "navigationBarTitleText""页面标题自己改"
    }
    

    第二处修改:

     在xxx.wxml中引入刚设置好的组件,例如:
    <componentA bind:myeventData="getChildrenData"></componentA>
    

    第三处:

     在xxx.js中添加getChildrenData方法获取子组件的值,例如:
    getChildrenData(event){
     console.log('父组件中接收子组件的数据为', event.detail)
    }
    打印的结果为:
    父组件中接收子组件的数据为 {name: "我来自子组件"}
    
    

    效果如图:

    至此,一个简单的父子组件传值演示完毕,说严谨点儿是:父组件获取到了子组件的值。


    ----下面是父向子组件传递值,即:子组件要接收父传过来的值。

    子修改如下:

    properties: {
        parentData: {
          type: String
        } // 父传入的数据
      },
    handleClick(){
     const object ={name:'我来自子组件'} 
     this.triggerEvent('myeventData'object)
    console.log('在子组件中打印父的数据',this.data.parentData)
    }
    

    父组件中修改如下:

    在xxx.wxml中引入刚设置好的组件,例如:
    <componentA bind:myeventData="getChildrenData" parentData="parentData"></componentA>
    

    注意这里多了一个

    parentData="parentData"
    

    设置什么内容,要在父的js中进行添加,比如:

     修改父的xxx.js,比如:
     data:{
    parentData: '我来自父级'
    }
    

    如图:

    至此,父向子组件传值、子向父组件传值,双方均已打通。

    (第一次在社区编辑器中写代码,献丑了。)

    2020-06-19
    有用 2
    回复 2
    • 启航
      启航
      2020-06-19
      谢谢大佬,还有在组件中是不是用不了app.js里定义的全局变量?
      2020-06-19
      回复
    • 2020-06-19回复启航
      用了用不了,不要乱猜,亲自试一把就知道了。测试结果如下:
      继续修改刚提到的子组件,最上方添加一行代码:
      效果如图:
      2020-06-19
      回复
登录 后发表内容
问题标签