2022-01-08 微信小程序笔记(五) 小程序的组件:父子传值和子父传值

1.小程序中的自定义组件的级别就相当于components文件夹下的组件

小程序的自定义组件的级别相当于vue中components里面写的页面的某一个单项功能的级别是一样的，只不过需要在小程序中定义，但都是组件化开发

vue项目中component文件夹下的.vue文件一般都是存放能实现单一功能的组件的地方,
如Tabbar.vue,SIdebar.vue,Headswiper.vue等
而views文件夹下的.vue文件一般是页面组件,如Home.vue,Login.vue等

2.创建一个小程序组件的步骤

创建自定义组件

创建components下的文件夹tab,包含四个文件名为index的wxml,wxss,js,json文件,
在index.wxml写入:<text>我是自定义组件</text>,

引用自定义组件

在需要调用的页面(如pages/movies文件夹)的json文件中引入:

{
  "usingComponents": {
    "tab":"../../components/tab"
  }
}

再在wxml中使用<tab></tab>
如此,便完成了一个自定义组件的定义和调用

3.小程序组件的父子组件传值

components/tab/index.js中

   properties: {//相当于vue中的props
    },

父子组件传值的步骤:示例(接上例)

父组件:pages/movies/
1.movies.json中引入子组件:

{
  "usingComponents": {
    "tab":"../../components/tab"
  }
}

2.movies.wxml中定义组件名以及组件值

<!-- <tab aaa="123456"></tab> -->
<tab aaa="{{tab}}"></tab>

3.movies.js文件中中定义数据

    data: {
        tab:[1,2,3,4,5]
    },

子组件:components/tab/
4.index.js接收数据

    properties: {//相当于vue中的props
      aaa:{
        // type:String,
        type:Array,
        value:''
      }
    },

4.小程序组件的子父组件传值:子传父是通过事件来触发的

子组件中通过 this.taiggerEvent(“父组件自定义的事件名”,要传递的参数) 
来通过事件传递数据给父组件

子父组件传值的步骤:示例

子组件:components/tab/
0.在index.wxml触发点击事件tapinfobtn

<button bindtap="tapinfobtn">子组件按钮</button>

1.在子组件的index.js中通过triggerEvent 来通过事件tapinfobtn传递数据88888给父组件

    methods: {
     tapinfobtn() {
     	//info2是父组件自定义的事件名,88888是要传递的参数
        this.triggerEvent('info2',88888)//类似于vue的$emit()
      }
    }

父组件:pages/movies/
2.在movies.wxml中绑定自定义事件info2

<tab bindinfo2="fatherfn"></tab>

3.在movies…js中定义方法fatherfn

  fatherfn(eve){
        console.log("eve",eve.detail);//点击子组件按钮,输出:88888
    },