模版属性

状态：aip-state

注意

与标准规范中的定义有差别，请仔细阅读下方说明和示例，注意区分

由于 aip-state 极易被误用，SFC 场景需要控制 state 的使用方式，所以直接在标签上挂载 aip-state 的写法会被覆盖或忽略，仅支持在脚本部分的 state 中声明，同时功能也更强大

基本使用方式如下（详细定义及更多用法请查看脚本定义 state 部分）：

<!-- entry.aip -->
<template>
    <div>{{a}}</div>
</template>
<script>
    export default {
        state: {
            a: 1 === 1,
        },
    };
</script>

生成的标准 AIP 页面产物为：

<!-- 编译结果 -->
<div aip-state="(() => {return { a: true };})()">{{ a }}</div>

文本插槽

• 支持设置 state，不支持标识 this
• 支持引用 methods 中函数，以调用方式执行函数，函数必须有返回值

基本使用方式如下：

<!-- entry.aip -->
<template>
    <div>{{ value + getValue() }}</div>
</template>
<script>
    export default {
        state: {
            value: 'hello',
        },
        methods: {
            getValue() {
                return this.value + ' world';
            },
        },
    };
</script>

生成的标准 AIP 页面产物为：

<!-- 编译结果 -->
<div
    aip-state="(() => {return { value: 'hello', getValue() {return this.value + ' world';} };})()"
>
    {{ value + getValue() }}
</div>

绑定：aip-bind

• 支持设置 state，不支持标识 this
• 不支持引用 methods 中函数
• 特别地，针对 class 和 id 如果绑定到了 state 变量不再自动匹配相应的 state 样式（详见样式定义部分）

基本使用方式如下：

<!-- entry.aip -->
<template>
    <div [id]="id"></div>
</template>
<script>
    export default {
        state: {
            id: 'btn',
        },
    };
</script>

生成的标准 AIP 页面产物为：

<!-- 编译结果 -->
<div aip-state="(() => {return { id: 'btn' };})()" [id]="id"></div>

双向绑定：aip-model

• 支持设置 state，不支持标识 this
• 不支持引用 methods 中函数

基本使用方式如下：

<!-- entry.aip -->
<template>
    <aip-input type="text" [(value)]="name" />
</template>
<script>
    export default {
        state: {
            name: 'default',
        },
    };
</script>

生成的标准 AIP 页面产物为：

<!-- 编译结果 -->
<aip-input
    aip-state="(() => {return { name: 'default' };})()"
    [(value)]="name"
    type="text"
></aip-input>

事件：aip-on

• 支持在模版中调用事件
• 如果需要在模版中引用外部函数，需要先挂载到 methods 下
• 实现时 methods 会平铺在 state 中，注意函数名是否重复

基本使用方式如下：

<!-- entry.aip -->
<template>
    <aip-view (click)="onClick($event)">
        <aip-button aip-init="showLog()">Button</aip-button>
    </aip-view>
</template>
<script>
    export default {
        methods: {
            onClick($event) {
                console.log('click');
                console.log('show', $event);
            },
            showLog() {
                console.log('button init');
            },
        },
    };
</script>

生成的标准 AIP 页面产物为：

<!-- 编译结果 -->
<aip-view
    aip-state="(() => {return { onClick($event) {console.log('click');console.log('show', $event);}, showLog() {console.log('button init');} };})()"
    (click)="onClick($event)"
>
    <aip-button aip-init="showLog()">Button</aip-button>
</aip-view>

• 特别地，支持在表达式中引用函数

<!-- ✅ 可以匹配 methods 中的 onClick 方法-->
<button (click)="onClick">button</button>

<!-- ✅ 可以匹配 methods 中的手动调用的 onClick 方法 -->
<button (click)="console.log('a');onClick($event)">button</button>

其他指令

其他指令，如 aip-if、aip-show、aip-for 等指令行为与 AIP 标准规范的定义和行为一致