mixins -凯发app官方网站

更新时间：2022-11-09 13:49:01

贡献者

订阅更新

我的文档

设置

概述

开发者有时可能会实现多个自定义组件，而这些自定义组件可能会有些公共逻辑要处理，小程序提供 mixins 用于解决这种情况。

示例代码：

// /mixins/lifecycle.js

export default {

oninit() {

console.log('init');

derivedatafromprops(nextprops) {},

didmount() {},

didupdate(prevprops, prevdata) {},

didunmount() {},

};

注意

oninit

与

derivedatafromprops

自基础库

1.14.0

开始支持，可以使用

my.caniuse('component2')

做兼容判断，并且，使用 component2 的相关功能，需要在 ide 中的

详情

项目配置

中，勾选 component2。

// /components/index/index.js

import lifecycle from '/mixins/lifecycle';

const initialstate = {

data: {

islogin: false,

};

const defaultprops = {

props: {

age: 30,

};

const methods = {

methods: {

ontaphandler() {},

};

component({

mixins: [lifecycle, initialstate, defaultprops, methods],

data: {

name: 'alipay',

});

mixin

基础库

开始，自定义组件的参数 mixins 开始支持通过

mixin()

注册生成的 mixin。对比直接传入普通的 js 对象，通过 mixin 注册生成的 mixin 有三点不同：

●

mixin 支持

mixins

参数，即嵌套传入 mixin。

●

mixin 注册的 mixin 实例支持自定义组件扩展机制。

●

可通过自定义组件实例方法

hasmixin

判断当前自定义组件使用引入了某个 mixin 实例。

同名字段的覆盖和组合规则

组件和它引用的 mixin 可以包含同名的字段，对这些字段的处理方法如下：

●

如果有同名的属性（props）或方法 (methods)：

若组件有这个属性或方法，则组件的属性会覆盖 mixin 中的同名属性或方法。

若组件本身无这个属性或方法，则在组件的

mixins

字段中定义靠后的 mixin 的属性或方法会覆盖靠前的同名属性或方法。

在 b 的基础上，若存在嵌套引用 mixin 的情况（只有 mixin 才支持嵌套引用 mixin，且被引用的 mixin 需是 mixin 实例），则规则为：引用者 mixin 覆盖被引用的 mixin 实例中的同名属性或方法。

●

如果有同名的内部数据字段（data）：

若组件有这个数据字段，则组件的数据字段会覆盖 mixin 中的同名数据字段。

若组件无这个数据字段，则：引用者 mixin > 被引用的 mixin（只有 mixin 才支持嵌套引用 mixin，且被引用的 mixin 需是 mixin 实例）、靠后的 mixin > 靠前的 mixin（优先级高的覆盖优先级低的，最大的为优先级最高）。

●

生命周期函数和 observers 不会相互覆盖，而是在对应触发时机被逐个调用：

○

对于不同的生命周期函数之间，遵循组件生命周期函数的执行顺序。

○

对于同种生命周期函数和同字段 observers ，遵循如下规则：

■

mixin 优先于组件执行。

■

被引用的 mixin 优先于引用者 mixin 执行（只有 mixin 才支持嵌套引用 mixin，且被引用的 mixin 需是 mixin 实例）。

■

靠前的 mixin 优先于靠后的 mixin 执行；

○

如果同一个 mixin（需是 mixin 实例）被一个组件多次引用，它定义的生命周期函数和 observers 不会重复执行。

相关问题