小程序组件的使用

小程序组件的使用

一个组件内的文件：axml、js、acss、json

json 文件

开发者需要在.json文件中指明自定义组件的依赖。如下：

{
    "component": true,
    "usingComponents": {
        "c1":"../x/index"
    }
}

component 属性必填

---

js 文件

js 文件的属性和方法：

Component({
  // 开发者有时候可能会实现多个自定义组件，而这些自定义组件可能会有些公共逻辑要处理，为此，小程序提供了mixins。
  // 注意： 这个是什么意思？？？？？？？？？？？？
  // 每一个 mixin 只能包含 props、data、methods、didMount、didUpdate、didUnmount等属性。
  // 多个 mixin 中的属性 key 要确保不同，否则会报错。
  mixins: [],
  // data 为组件的局部状态，和页面一样，可以通过this.setData更改，会触发组件的重新渲染。
  data: {},
  // 以上代码使用 props 属性设置属性默认值，然后在事件处理函数中通过 this.props 可以取到这些属性。
  // 注意：
  // props 为外部传过来的属性，可指定默认属性，后面不可修改。
  // 自定义组件的 axml 中可以直接引用 props 属性。
  props: {},
  // didMount 为渲染后回调，此时页面已经渲染，通常在这里请求服务端数据比较合适。
  didMount() {},
  // didUpdate 为更新后回调，每次组件数据变更的时候都会调用。
  // 注意：
  // 组件内部调用 this.setData 会触发 didUpdate
  // 外部调用者调用 this.setData 也会触发 didUpdate
  didUpdate() {},
  // didUnmount 为组件卸载后回调，每当组件示例从页面删除的时候会触发此回调。
  didUnmount() {},
  methods: {},
});

---

其他组件实例属性

除了 data、setData、props等属性外，组件实例上还有如下属性：

• is: 组件路径

• $page: 组件所属页面实例

• $id: 组件 id，在 axml 中也可直接渲染

---

axml 文件

• default slot 的使用

<view>
  <slot>
    <view>default slot & default value</view>
  </slot>
  <view>other</view>
</view>

• name slot 的使用（命名插槽） 在不同的位置渲染不同的 axml，可以传递多个 axml

<view>
  <slot>
    <view>default slot & default value</view>
  </slot>
  <slot name="header"/>
  <view>body</view>
  <slot name="footer"/>
</view>

• slot scope 的使用 写在 slot 中的 axml 代码使用子组件中的 data上 的数据，及可以访问到当前 page 上的数据也可以访问组件内部中的 data 上的数据 在外部调用者使用组件自定义标签的时候，使用slot-scope属性，slot-scope 的值将被用作一个临时变量名，此变量接收从自定义组件 axml 传递过来的 prop 对象。

<xx>
<view slot-scope="props">
<view>component data: {{props.x}}</view>
<view>page data: {{y}}</view>
</view>
</xx>

// /pages/index/index.js
Page({
data: { y: 2 },
});
// /components/xx/index.js
Component({
data: {
x: 1,
},
});

• 页面显示结果

component data: 1
page data: 2
body

props 的使用

props 中是父组件传递下来的数据和事件名称，可以在组件内部使用