赞
踩
在本周我学习了如何使子组件和父组件通信,笔记如下:
<!--
属性绑定:
用于实现父亲向子传值,且只能传递普通类型的数据
事件绑定:
用于实现子向父传值
1、先在父子间的js中定义将事件传递给子组件的函数
2、父组件的wxml中,通过自定义事件的形式引用该函数,传递给子组件
3、在子组件中使用this。triggerEvent('')
4、在父组件中的e.detail可以看到传递的数据
获取组件实例:
this.selectComponent()获取子组件的实例对象
----------------------------------------------
普通的属性绑定:
设子组件为<child><cihld/>
在property属性中声明了一个变量为gift=Number
设父组件为<vater><vater/>
在data中声明了一个变量为for_me=666
通过<child gift={{for_me}}><vater/>就可以将
父组件的for_me属性传递给子组件的gift属性传递
---------------------------------------------
事件绑定:
同样设子组件为<child><child/>
声明了一个方法push(){console.log("I will crash you!")}
设父组件为<vater><vater/>
声明了一个事件fall(e){console.log("ahh!!")}
步骤:
1、在父组件中data平齐位置声明自己的事件函数(一个普通函数
可以不需要参数之类的,想干嘛就干嘛)如fall(){console.log("ahh!!")}
2、在子组件中绑定本事件:使用bind:sync="父组件中事件名"
来绑定本事件,本例中为<child bind:sync="fall"><child/>
3、在子组件的方法的需求函数中添加this.trigerEvent()
在本例子中需要在push函数中添加this.triggerEvent("fall")
若需要传入参数,则可以写this.triggerEvent("fall",参数),
如this.triggerEvent("fall",{strength:10000})
此时在父组件的fall函数中,e会接受到这个{strength:10000}
的对象
4、然后在父组件接受参数e中的detail属性就可以得到这个值
在本例子中是e.detail.value
----------------------------------------------------------------
获取组件实例以实现父子通信:
在父子间中使用this.selectcompon("id或class选择器")来获取对象
同样设子组件为<child class="kids"><child/>
声明了一个方法push(){console.log("I will crash you!")}
设父组件为<vater bindtap="getchild"><vater/>
声明了一个事件fall(e){console.log("ahh!!")}
对于父组件的函数getchild(){
const child=this.selectComponent(".kids")
//返回的child是一个对象
this.setData({
aaa:child.properties.bbb
//以此来改变子组件中的数据
child.push()
//调用子组件中的方法
})
}
------------------------------------------------
-->
同时在本周我已经完成了所有的小程序基本语法的学习和复习
包括但不限于:
基本组件(scroll-)view, swiper, button,image等
事件绑定 wx-if,wx-for等类vue语句
wxss样式的使用和配置作用域
get和post请求,wx.request
navigator相关语法
页面生命周期函数及其应用场景
以及组件中的语法
参考于bilibili黑马程序员的微信小程序网课,以上的内容是前75集的内容(都已学完)
同时跟着这个网课做了那个案例熟悉了一下wx.requst,以下是我的案例截图:
第二张图我试了几下好像视频给的那个接口没用了,所以我就没展示模拟画面
这个项目打了三个小时左右吧,也是边写边帮我复习了很多
同时自己去了解了git,安装了git,了解了git的一些基本作用和一些基本用法,诸如clone,commit
pull,push等等,参考与公众号程序员成长指北的一篇文章
接下来两周计划
接下来我打算花一到两个星期的事件来学会组件库的使用、分包的一些基本使用方法,以及重点学习如何自制一个tabBar,并且尝试制作出自己的一些tabBar
第一次写这种博客,也不知道应该写些什么,就先写这么多吧
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。