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

微信小程序父子组件之间传值有两种：

1.父组件向子组件传值

2.子组件向父组件传值

---

区别：

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

---

父组件向子组件传值

1.1 在父组件的.json文件中导入子组件

  "usingComponents": {
    "childpart":"/components/childpart/childpart",
  }

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

{
 "component": true,
}

2. 1  在父组件的wxml中，子组件进行引用：

        给组件起的自定义名字是 childpart ,渲染的时候 在父组件里写上一组 <childpart></childpart> 标签，就可以把子组件渲染到父组件。

2.2  我们在父组件.js文件的数据data 中定义两个数据，nameValue:'lizi', ageValue:18

 data: {
      nameValue:"lizi",
      ageValue:18
    },

2.3  在父组件的wxml文件中把这个数据传递给子组件 childpart。绑定属性值( name,age)，并传递想要给子组件的值( nameValue,ageValue)

<childpart name="{{nameValue}}" age="{{ageValue}}"></childpart>

3.  在子组件中的js中使用 properties 获取值，这样就可以在子组件中用获取到这个值了

 // 接受父组件传递过来的值
  properties: {
    name:{
      type:String,
      value:''
    },
    age:{
      type:Number,
      value:''
    }
  },

4. 可以在子组件的wxml页面中引用看看是否传递成功了 

父组件页面显示如下：

---

子组件向父组件传值

1. 先在子组件childpart.js的data 数据中 定义一个数据 msg:

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

2.  在子组件wxml 中放一个按钮，并绑定一个事件 sendMsg

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

3. 在childpart.js中定义一下这个sendMsg ，并传值： 

 methods: {
    sendMsg(){
      this.triggerEvent('sendMsg',this.data.msg)
    }
  },

4. 传值使用的是 this.triggerEvent() ，sendMsg 就是传递给父组件的自定义事件名称，然后在父组件中绑定一下这个事件bindsendMsg="sendMsg"

<childpart name="{{nameValue}}" age="{{ageValue}}" bindsendMsg="sendMsg"></childpart>

5.在父组件的 js 文件中定义sendMsg方法，并传递事件对象 e

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

子组件传递过来的值使用 e.detail就可以获取到了