【微信小程序】父子组件之间传值
微信小程序父子组件之间传值有两种:
1.父组件向子组件传值
2.子组件向父组件传值
区别:
父组件向子组件传值
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就可以获取到了