当前位置:   article > 正文

第一周打卡_this.selectcomponent

this.selectcomponent

在本周我学习了如何使子组件和父组件通信,笔记如下:

<!--

  属性绑定:

  用于实现父亲向子传值,且只能传递普通类型的数据

  事件绑定:

  用于实现子向父传值

    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

 第一次写这种博客,也不知道应该写些什么,就先写这么多吧

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/731088
推荐阅读
  

闽ICP备14008679号