2.子组件Component({_小程序组件动态传值">
赞
踩
1.父组件可以直接传参或者使用数据绑定向子组件动态传递数据
组件在父组件内写法:
- <view>
- <!-- 以下是对一个自定义组件的引用 -->
- <my-component inner-text="Some text" numberA='5' numberB='{{dataFieldA}}'></my-component>
- </view>
2.子组件
- Component({
- properties: {
- // 这里定义了innerText属性,属性值可以在组件使用时指定
- innerText: {
- type: String,
- value: 'default value',
- },
- numberA: {
- type: Number,
- value: 0
- },
- numberB: {
- type: Number,
- value: 0
- }
- },
- data: {
- // 这里是一些组件内部数据
- },
- methods: {
- // 这里是一个自定义方法
- }
- })
3.然后在子组件js的this.properties.innerText.value就可以访问到父组件传进的dataField的值,或者wxml中直接按照data的使用方式{{propname}}来使用
1.子组件在需要传值时,使用triggerEvent传给父组件一个事件( myevent ),并传递想要给父组件的值( sonParam )
this.triggerEvent('myevent', {sonParam: false})
2. 在父组件中,子组件的引用处,通过这个myevent事件绑定一个方法( onMyEvent )
<customSelector bind:myevent="onMyEvent">
3.在父组件的js中,定义这个方法onMyEvent,在这个方法内就可以获取到子组件传递过来的值了
- onMyEvent: function(e) {
- let sonParam = e.detail.sonParam
- }
1.在子组件的里的methods里定义一个方法
- // components/header/header.js
- Component({
- properties: {
- },
- data: {},
- methods: {
- getrun() {
- console.log('我是子组件的方法')
- },
- }
- })
2.在父组件的调用里定义一个id唯一标识
按钮用来获取子组件的方法
- <header id="header"></header>
- <button bindtap="getson">获取子组件的方法</button>
- getson() {
- var header = this.selectComponent("#header")
- console.log(header.data) //子组件的数据
- header.getrun() //子组件的方法
- },
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。