v-model

可以非常便利的为子组件添加v-model属性

基本用法

初始化代码骨架

TIP

右键菜单 - [模块路径/src/component/card]: Zova Refactor/Add v-model

依据提示输入 model 属性的名称，默认是modelValue，VSCode 插件会自动添加v-model的代码骨架

访问v-model

在render.tsx中访问 v-model：

child/render.tsx

export class RenderChild {
  render() {
    return (
      <div>
        <div>{this.modelValue}</div>
        <button
          onClick={() => {
            this.modelValue++;
          }}
        >
          Change
        </button>
      </div>
    );
  }
}

• 本地变量modelValue可实现与父组件的双向绑定。修改modelValue的值会触发父组件绑定的值同步更新

使用v-model

接下来，在父组件中使用 v-model：

parent/controller.ts

export class ControllerPageParent {
  count: number;
}

parent/render.tsx

export class RenderParent {
  render() {
    return (
      <div>
        <Child v-model={this.count}></Child>
      </div>
    );
  }
}

• 直接使用v-model绑定变量即可

v-model参数

modelValue是默认的 model 参数，我们也可以指定其他 model 参数

初始化代码骨架

TIP

右键菜单 - [模块路径/src/component/card]: Zova Refactor/Add v-model

依据提示输入 model 属性的名称，比如：title，VSCode 插件会自动添加v-model的代码骨架

访问v-model

在render.tsx中访问 v-model：

child/render.tsx

export class RenderChild {
  render() {
    return (
      <div>
        <input v-model={this.modelTitle} />
      </div>
    );
  }
}

使用v-model

接下来，在父组件中使用 v-model：

parent/controller.ts

export class ControllerPageParent {
  title?: string;
}

parent/render.tsx

export class RenderParent {
  render() {
    return (
      <div>
        <Child v-model:title={this.title}></Child>
      </div>
    );
  }
}

v-model修饰符

v-model 支持修饰符。我们来创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定值的首字母转为大写：

child/controller.ts

export interface Props {
  titleModifiers?: {
    capitalize: boolean;
  };
}

export class ControllerChild {
  protected async __init__() {
    this.modelTitle = this.$useModel('title', {
      set: value => {
        if (this.$props.titleModifiers?.capitalize) {
          if (!value) return value;
          return value.charAt(0).toUpperCase() + value.slice(1);
        }
        return value;
      },
    });
  }
}

• 添加 Prop titleModifiers，并且定义一个修饰符capitalize
• 调用$useModel方法时传入 set 选项。在 set 选项中判断capitalize的值对value做相应的处理

使用v-model

接下来，在父组件中使用 v-model 修饰符：

parent/controller.ts

export class ControllerPageParent {
  title?: string;
}

parent/render.tsx

export class RenderParent {
  render() {
    return (
      <div>
        <Child v-model:title_capitalize={this.title}></Child>
      </div>
    );
  }
}