微信小程序学习笔记（5）

写在前面：

本文仅用于记录自己的学习经过和转载一些资料

本文所有练习和实例均使用vscode和微信官方的微信开发者工具共同完成，vscode仅用于编译代码。某些功能如即时模拟，实际上要使用微信官方工具才得以实现。

要达成代码同步，仅需要使用vscode和微信工具同时打开一个项目即可。

---

目录

六、WXSS中的自定义组件

1、组件js文件中的三个属性

        1）properties

        2）data

        3）methods

2、子与父互相传递数据

---

六、WXSS中的自定义组件

        一个自定义组件实际上类似于给一个页面封装，故和一个小程序页面组成类似，都有wxml、wxss、js和json四个文件，故我们可以先创建一个与pages同级的文件，并利用微工快速创建四个基础文件。

        我们可以看到，组件的js文件的写法和pages的写法不同：

Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})

js文件

        同时，在json文件中，可以看到配置：

{
    "component": true,
    //是否为组件
    "usingComponents": {}
    //使用的组件（可以套娃）
}

组件的json

        可以看出，在page的json文件中也有一样的配置，若要使用自定义组件，就要将其加载在"usingComponents": {}中。举例，我想在demo中加载我的自定义组件“Tabs”：

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
    //格式为"组件名":"相对地址"
  }
}

页面的json

        调用声明结束后，就可以直接在wxml页面中用标签调用，如上述例子，我们可以直接在wxml中用<Tabs><Tabs/>进行调用。

---

1、组件js文件中的三个属性

        1）properties

        这个属性用于接受父页面（也就是调用这个组件的页面）传递的数据，例如在父页面我们调用组件并在标签名中加入自定义属性"tst"并赋值123：

<tabs tst="123"> <tabs/>

        若想利用这个属性，就需要在组建的js文件中的properties方法中加入这个属性“tst”：

Component({
    properties:{
        tst:{
            type : String,
            value : []
        }
        //type为数据类型，value为初始数值。
    }
})

        2）data

        同一般界面，存放初始数据。

        3）methods

        用于存放页面调用的回调函数，和一般界面区分开：在一般界面中，回调函数直接和data同级，直接放在page({})下，而自定义组件的回调函数则固定放在methods方法中。

2、子与父互相传递数据

        父向子传递数据，可以用上述的所说的properties来接受数据，通过事件标签来传递数据。

        子向父传递数据，则是利用事件来实现：

this.triggerEvent("父组件自定义事件的名称"，要传递的参数)

        二者的关系具体如下图：