900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 小程序菜鸟的父子组件传值 父子组件方法调用的学习

小程序菜鸟的父子组件传值 父子组件方法调用的学习

时间:2019-11-07 18:42:52

相关推荐

小程序菜鸟的父子组件传值 父子组件方法调用的学习

父组件给子组件传值

parent.wxml:<view><child title="我是父组件传进来的标题"/><child /></view>child.wxml:<view class="child">{{title}}</view>*在child.js的properties接收父组件传给子组件的数据:properties: {// title:String (第一种写法)title:{ // (第二种写法)type:String,value:'我是子组件默认的title' //当父组件没有传递参数的时候,使用value的值为默认值}}

父组件调用子组件的方法

先给子组件定义一个id父组件获取子组件的实例:var header=this.selectComponent("#head")header.方法名() 执行子组件的方法

parent.wxml:<view><child id="header"/><button size="mini" bindtap="ParentGetChild_Method">父组件调用子组件的方法</button></view>child.wxml:<view class="child">{{title}}</view>

child.js:Component({properties: {title:{type:String,value:'我是子组件默认的title'}},data: {},methods: {run(){console.log('我是子组件的run方法')}}})

parent.js:ParentGetChild_Method(){var header=this.selectComponent('#header')header.run()}

子组件调用父组件的方法

1. 在子组件的方法中:this.triggerEvent('parent') 2. 在父组件调用子组件:<child bindparent="run"> //run即父组件中被子组件调用的方法*this.triggerEvent('参数1'),参数1是自定义的,但在父组件调用子组件的时候,必须bind+参数1

child.wxml:<button size="mini" bindtap="ChildGetParent_method">子组件调用父组件的方法</button>parent.wxml:<child bindparent="isParent"/>

child.js:Component({properties: {},data: {},methods: {ChildGetParent_method(){this.triggerEvent('parent')}}})parent.jsisParent(){console.log('我是父组件的方法')}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。