web学习笔记（七十八）

1.自定义子组件的配置

[2. 自定义子组件生命周期函数](#2. 自定义子组件生命周期函数)

3.父子组件传值

[3.1 父传子](#3.1 父传子)

[3.2 子传父](#3.2 子传父)

1.自定义子组件的配置

在components文件中可以创建子组件，首先需要创建一个文件夹，然后右击文件夹选择新建Component选择这个配置系统不会自动配置路由，选择新建Page是会生成路由的。
在子组件的js文件中有一个Component组件实例，用于创建组件实例对象，需要注意和Page实例对象进行区分。

properties是组件的属性列表:类似于vue的props，用于接收父组件的props传值

javascript 复制代码

  properties: {

    // 可以简写，也可以通过对象格式来进行编写。

    age: Number,

    min: {

      // 约定值的类型，可以 约定一个，也可以约定一组类型

      type: String,

      // 定义初始值

      value: "0",

    },

    max: {

      type: [String, Number],

      value: "2",

    },

  },

data组件的初始:组件自身的响应式数据，和Page中data用法是一样的。
javascript 复制代码
```
  data: {},
```
methods是组件的方法列表
javascript 复制代码
```
  methods: {},
```
在使用子组件时我们需要在对应的.json文件先进行导入子组件的操作，然后再页面上输入子组件的标签进行使用。
javascript 复制代码
```
{
  "usingComponents": {
    "custom-grid": "../../components/grid/grid"
  },
  "navigationBarTitleText": "这里是分类页面",
  "onReachBottomDistance": 50
}
```
javascript 复制代码
```
<custom-grid></custom-grid>
```

2. 自定义子组件生命周期函数

(1)created

created类似于vue中的beforeCreate，相同点都是组件实例this刚刚被创建，此时组件的响应式数据及方法都还没有挂载到this上。在组件实例刚刚被创建时执行，注意此时不能调用setData

javascript 复制代码

 created() {

  },

(2)arrached

在组件实例刚刚进入页面节点树时执行，类似于vue的created，此时组件的响应式数据及方法都已经挂载到this上，可以发送初始化请求了。

javascript 复制代码

arrached() {

  },

(3)ready

在组件布局完成后执行，类似于vue的mounted，此时组件初始挂载完毕，组件创建阶段的生命周期结束了。

javascript 复制代码

ready() {

  },

(4)detached

组件卸载时的生命周期

javascript 复制代码

detached() {

  },

以上四种是老版本的子组件声明周期，在新版本中也可以使用，但是更推荐使用lifetimes来编写子组件的生命周期。注意：lifetimes仅支持2.2.3版本基础库以上的新写法（我们可以在详情中的本地设置看到调试基础库的版本）。

javascript 复制代码

lifetimes: {

    // 2.2.3版本基础库以上的新写法（我们可以在详情中的本地设置看到调试基础库的版本）

    attached: function () {

      // 在组件实例进入页面节点树时执行

    },

    datached: function () {

      // 在组件实例被从页面节点数移除时执行

    },

  },

我们也可以通过子组件来控制父组件的生命周期，比如当父组件显示时子组件执行什么操作，或者当父组件隐藏时子组件执行什么操作

javascript 复制代码

// 父组件的生命周期

  pageLifetimes: {

    show() {},

    hide() {},

  },

3.父子组件传值

3.1 父传子

在父组件中直接在子组件对应标签内部进行传值，需要注意的是如果传递参数是一个变量则需要在变量外加双大括号，如果是传递一个数字类型或者是布尔类型，则不需要可以加双大括号，小程序会自动识别你在子组件中需要的数据类型，然后自动进行类型转换（将纯数字的字符串转换为数字，将'true'或'false'自动识别为布尔值）。

javascript 复制代码

<custom-grid age='100' min='text' max='abc'   bind:setCount="getCount"></custom-grid>

在子组件我们需要在通过properties来接受父组件传递过来的值。

javascript 复制代码

  properties: {

    // 可以简写，也可以通过对象格式来进行编写。

    age: Number,

    min: {

      // 约定值的类型，可以 约定一个，也可以约定一组类型

      type: String,

      // 定义初始值

      value: "0",

    },

    max: {

      type: [String, Number],

      value: "2",

    },

  },

3.2 子传父

小程序实现子组件向父组件传值的原理是和vue是一样的，都需要通过自定义事件来完成，在小程序中自定义事件是通过bind:事件名="触发方法名"来实现的。

实现子组件向父组件传值首先我们需要在父组件设置自定义事件，然后在子组件中绑定一个点击事件，通过触发子组件的绑定事件然后通过 this.triggerEvent来调用父组件的自定义事件。

父组件：

html 复制代码

<custom-grid age='100' min='text' max='abc'   bind:setCount="getCount"></custom-grid>

我们从子组件传过来的是一个对象，通过e.datail才能取到里面的数据。

javascript 复制代码

  getCount(e) {
    console.log("---", e);
    this.setData({
      count: e.detail,
    });
  },

子组件：

html 复制代码

<button bind:tap="go">发射事件</button>

javascript 复制代码

  methods: {
    go() {
      this.triggerEvent("setCount", 1000);
    },
  },