> 文章列表 > 【微信小程序】父子组件之间传值

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

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

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

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就可以获取到了