微信小程序父子组件之间传值

Posted 2023-03-31 但行好事wlw

父子组件之间传值

组件之间传值有两种，一种是父向子传值，另外一种是子向父传值

先说一下大致的区别吧…

区别：

1. 父向子传值使用的是属性绑定，子组件中 的 properties 对象 进行接收父组件传递过来的值
2. 子向父传值使用的是自定义事件，父组件通过自定义事件中的 事件对象e 来接收子组件传递过来的值

父向子传值

首先我们在我们的小程序中创建一个 components 文件夹 用来存放我们的子组件。创建以后我们就可以在 components 文件夹下创建我们的子组件 child , 当然创建成任何名字都可以，我在这里创建成 child ，如下图：

创建好以后就是引入了，把这个子组件 child 引入到我们的 父组件 index 首页中去。 这里说明一下，我在这里一共就创建了两个页面，一个是 pages 节点下的 index 路由页面，以及 components 节点下的 child 组件。

那么我们怎么引入呢？（原则在父组件的 json 文件中的 usingComponents节点下 引入）如下：

  "usingComponents": 
    "child":"../../components/child/child"
  

引入以后怎么把子组件的内容渲染到父组件上呢？… ：

也很简单：上面我们引入的时候，看上面代码：给组件起的自定义名字是 child 那么 我们渲染的时候就 在 index 父组件 里写上一组 <child><child> 标签即可，就可以把子组件渲染到 父组件中…

此时我们父子页面都有了，那么就可以进行传值了…

我们在父组件的数据data 中定义两个数据，name:'张三', age:23, 把这个数据传递给 子组件 child

在这里我们分三个步骤：

1.在 child 标签中 使用属性绑定的方式 把父组件的值绑定一下 <child name=" name " age=" age " ></child>，此时父组件的操作已经ok了，接下来看子组件的操作…
2.在子组件的 js 文件的 properties 对象中接收父组件传递过来的值

  // 接受父组件传递过来的值
  properties: 
    name:
      type:String,
      value:'我是默认值：苹果'
    ,
    age:
      type:Number,
      value:'我是默认值： 100'
    
  ,

3.此时子组件 child 已经接收到了 父组件传递过来的值 ，我们可以在 子组件的 wxml 页面中 引用一下这个值看看是否传递成功了

<!-- 父向子传值 -->
<view>
  这是父组件传递过来的值 name:  name -----age age
</view>

index 父页面 显示的结果如下：

显然传递成功… >^<

接下来说说子向父传值

子向父传值

我们先在子组件的data 数据中 定义一个数据 msg

  data: 
    msg:'我是子组件的值'
  ,

接下来就开始传值，传值时间上来分有两种，
第一种在组建的生命周期中，也就是页面一加载就把组件中的值传过去
第二种通过事件绑定的方式传值

先说第二种：（时间绑定的方式）：

1.在子组件wxml 中放一个按钮，并给他绑定一个事件 send

<!-- 点击按钮向父组件传值 -->
<button bindtap="send">点击按钮向父组件传值</button>

2.在child.js中定义一下这个send ，并写入一下传值的代码：

 methods: 
    send()
      this.triggerEvent('send',this.data.msg)
    
  ,

传值使用的是 ：this.triggerEvent() ，上面代码中 send 就是传递给父组件的自定义事件名称，接下来就在父组件中定义一下这个自定义事件bindsend="send"

<child  name=" name " age=" age " bindsend="send"></child>

定义好以后，在 父组件的 js 文件中，定义一下send ，并且给send 方法 ，传递一个 事件对象 e

 // 父组件接受子组件传递过来的值
  send(e)
    console.log(e.detail);
  ,

子组件传递过来的值就存放在 e.detail 中…

微信小程序-父子组件传值

 

父组件：

绑定的一个属性(btns)，（子组件名可以使驼峰大写，也可以小写）

<order-button bind:viewPageReloadFuc="onViewPageReloadFuc" btns="{{item.orderControlBtns}}"></order-button>

父组件引用子组件

{
    "navigationBarTitleText": "我的订单",
    "usingComponents": {
        "order-button": "/components/order-button/order-button"
    }
}

 

onViewPageReloadFuc(e){
   console.log("子组件触发并传过来的参数值", e.detail.cao)
},

 

子组件：

<view wx:for="{{btns}}" wx:key="index">
   <view catchtap="buttonClick" data-btn="{{item}}">{{item.desc}}</view>
</view>

在子组件的json中，把自己定义为子组件

{
  "component": true
}

在properties里定义的是组件对外要开发的属性，在data里定义的是在组件里自己使用的私有的数据；

我们不要把data和properties里的变量设置成同一个名字，如果他们名字相同，properties里的会覆盖data里的。

Component({
  data: {
  },
  properties: {
    btns: {
      type: Array,
      value: []
    }
  },
  methods: {
    buttonClick(e){
      let btn = e.currentTarget.dataset.btn;
      // 一键复购
      if(btn.state == ‘buyAgain‘){
　　　　 //子组件传给父组件一个事件

　　　　　　this.triggerEvent(‘viewPageReloadFuc‘, {cao: ‘草‘})

      }
     }
  }