小程序基础学习笔记

自定义组件

1、创建自定义组件

① 声明自定义组件，json文件：

默认为true，不用声明了

② 编写组件内容，wxml文件：

③ 引入（注册）自定义组件，index.json：

{
  "usingComponents": {
   "my-component": "../../components/my-component"
  }
}

④ 使用自定义组件，index.wxml:

<view class="container">
   <my-component />
</view>

2、组件之间的双向绑定（两大类）

小程序的简易双向绑定语法中，主要分为两大类：

①在WXML中，表单元素 与 数据之间的双向绑定

原始写法：

在index.wxml中写一个input框

在index.js中定义绑定的数据

实现二者的双向绑定步骤：

给input绑定数据：

value="{{ inputText }}"

给input设置一个监听事件：

bindinput="handleInput"

bindinput事件是在键盘输入时触发

e.detail.value能够拿到用户输入的值，然后调用setData()更新inputText 数据

最后显示在页面中

WX简单的写法：

直接在value前面添加model: ，其余的事件也去掉，也能实现双向绑定的效果

②自定义组件中的双向绑定

父组件中 向 子组件传递数据

通过指定传递的属性input-text = “inputText”（将传递的数据改写为属性）

注意，传递的属性必须是以小写的形式,驼峰的要添加中划线

子组件通过properties属性接收数据

子组件在页面上使用

这样就完成了父组件向子组件传递数据，也就是在父组件输入数据时，子组件会接收到父组件的不断变化的数据，进行使用展示，实现组件之间的双向数据绑定

子组件修改父组件的值

当点击子组件的按钮时，修改父组件的数据

第一步：在父组件中 给子组件标签加上model:

第二步：给子组件添加点击事件

第三步：在子组件中修改父组件传递进来的数据

结果：

小结：父组件加model传递，子组件接收，并进行使用

3、组件模板和样式(slot插槽)

在自定义的组件模板中，除了可以使用标签来编写组件内容以外，还可以使用slot插槽。

插入单个slot

（父组件向子组件传递页面结构）

① 在使用组件的地方编写插槽的内容

<view class="container">
  <my-component>
   我就是插槽内容
  </my-component>
</view>

② 在my-coment组件内 将内容插入

理解：（自定义组件在别的页面使用的时候，带回来一些页面结构，实现了组件间的通信）

my-component.wxml:

<text>
 我创建了一个自定义组件
 <slot></slot>
</text>

插入多个slot

① 在自定义组件设置options属性

my-component.js文件：代表开启支持多个slot

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },

② 在使用组件的地方编写插槽的内容

通过slot属性指定插槽名称

<view class="container">
  <my-component>
   <text slot="head">我是插槽头部内容</text>
   <text slot="after">我是插槽底部内容</text>
  </my-component>
</view>

③在my-coment组件内 将内容插入

通过name属性指定对应的插槽内容

<text>
 <slot name="head"></slot>
 <slot name="after"></slot>
 </text>

运行结果：

4、组件之间的通信方式

1. 通过WXML数据绑定（父向子传递数据）

在自定义组件模板中，通过slot插槽的方式，由父组件向子组件传递WXML数据

还有在父组件中，通过为子组件指定属性，子组件通过properity的方式来传递（自定义组件的双向绑定）

2. 通过事件的方式（子向父传递数据）

父组件向子组件传递一个事件，在子组件中触发

当子组件触发事件并传递数据时，父组件接收子组件的数据，从而父组件的数据发生变化，来完成子与父的通信

①步：父组件定义一个事件handleCallback，同时定义事件名称change

②步：子组件定义一个事件handleClick，用于触发事件并传递数据

第一个参数是触发的事件名称，第二个参数是要传递的数据

父组件接收数据；通过参数接收，这只是接收到了数据而已

3. 如果上述两种方式都不能满足组件之间的通信

通过获取子组件实例，来实现父子之间的通信

和vue类似，通过ref来拿到子组件实例，然后去触发子组件对应的一些方法

比如说有时需要在子组件的某一个状态发生变化的时候，能够在父组件中去触发指定的子组件的方法。这种情况下，需要在父组件去拿到子组件的实例，通过 this.selectComponent方法获取子组件实例，然后去调用子组件所对应的方法

①给子组件添加class

② 在父组件调用，并可以调用子组件的方法

这就是在父组件中 去 调用子组件的方法，来实现的功能

5、数据监听器

Component({
  data: {
    numA: 1,
    numB: 2
  },
  lifetimes: {
    ready() {
      // 修改数据
      this.setData({
        numA: 5,
        numB: 6
      })
      console.log('触发');
    }
  },
//监听
  observers: {
    // 监听到变化之后，使用变化之后的值
    "numA, numB": function(numA, numB) {
      this.setData({
        sum: numB + numA
      })
    }
  }
})

通过.语法，监听某个特定属性的变化

注意：小程序中修改原数据的时候，不能直接修改，需要先进行深拷贝引用数据再修改。

报错处理：

这是缓存问题，清除缓存即可，全部清除