StencilJs 学习之组件装饰器

简介: Stencil 是一个生成 Web Components(更确切地说,是自定义元素)的编译器。Stencil 将最流行的框架的最佳概念结合到一个简单的构建时工具中。现在让我们一起学习其中的装饰器部分。

stenciljs 可以方便的构建交互式组件
支持以下装饰器

  • component
  • state
  • prop
  • watch
  • method
  • element
  • event
  • listen

Component 装饰器

@Component 是一个装饰器,它将 TypeScript 类指定为 Stencil 组件。 每个模板组件在构建时都会转换为 Web component。

import {
    Component } from '@stencil/core';

@Component({
   
  tag: 'todo-list',
  styleUrl: './todo-list.css',
  // additional options
})
export class TodoList {
   
  // implementation omitted
}

@Component装饰器还有其它的一些参数

  • assetsDirs: 是从组件到包含组件所需的静态文件(资产)的目录的相对路径数组。
  • scope:是否隔离css的作用域,如果启用了shadow则此项不能设置为 true
  • shadow: 阴影dom用来隔离样式。
  • styleUrls:包含要应用于组件的样式的外部样式表的相对 URL 列表。
  • styles:内联 CSS 而不是使用外部样式表的字符串。

State

@State 用于内部的状态管理,修改 @State装饰的变量会触发组件的重新渲染

import {
    Component, State, h } from '@stencil/core';

@Component({
   
    tag: 'current-time',
})
export class CurrentTime {
   
    timer: number;

    // `currentTime` is decorated with `@State()`,
    // as we need to trigger a rerender when its
    // value changes to show the latest time
    @State() currentTime: number = Date.now();

    connectedCallback() {
   
        this.timer = window.setInterval(() => {
               
            // the assignment to `this.currentTime`
            // will trigger a re-render
            this.currentTime = Date.now();
        }, 1000);
    }

    disconnectedCallback() {
   
        window.clearInterval(this.timer);
    }

    render() {
   
        const time = new Date(this.currentTime).toLocaleTimeString();

        return (
            <span>{
   time}</span>
        );
    }
}

Prop

@Prop 是用于声明外部数据传入组件的装饰器。

支持的数据类型有 number string boolean Object array,可以
使用this 进行数据访问,在html 设置需要使用dash-case 方式
在jsx 中使用camelCase 方式,默认prop 是不可变的,使用添加
mutable: true 进行修改, 使用 reflech 可以保持 prophtml属性 同步

import {
    Component, Prop, h } from '@stencil/core';

@Component({
   
    tag: 'todo-list-item',
})
export class ToDoListItem {
   
    @Prop({
   
        mutable: true,
        reflect: false
    }) isComplete: boolean = false;
    @Prop({
    reflect: true }) timesCompletedInPast: number = 2;
    @Prop({
    reflect: true }) thingToDo: string = "Read Reflect Section of Stencil Docs";
}

Watch

@Watch()是应用于模具组件方法的修饰器。 修饰器接受单个参数,即用 @Prop()@State() 修饰的类成员的名称。 用 @Watch() 修饰的方法将在其关联的类成员更改时自动运行。

// We import Prop & State to show how `@Watch()` can be used on
// class members decorated with either `@Prop()` or `@State()`
import {
    Component, Prop, State, Watch } from '@stencil/core';

@Component({
   
  tag: 'loading-indicator' 
})
export class LoadingIndicator {
   
  // We decorate a class member with @Prop() so that we
  // can apply @Watch()
  @Prop() activated: boolean;
  // We decorate a class member with @State() so that we
  // can apply @Watch()
  @State() busy: boolean;

  // Apply @Watch() for the component's `activated` member.
  // Whenever `activated` changes, this method will fire.
  @Watch('activated')
  watchPropHandler(newValue: boolean, oldValue: boolean) {
   
    console.log('The old value of activated is: ', oldValue);
    console.log('The new value of activated is: ', newValue);
  }

  // Apply @Watch() for the component's `busy` member.
  // Whenever `busy` changes, this method will fire.
  @Watch('busy')
  watchStateHandler(newValue: boolean, oldValue: boolean) {
   
    console.log('The old value of busy is: ', oldValue);
    console.log('The new value of busy is: ', newValue);
  }

  @Watch('activated')
  @Watch('busy')
  watchMultiple(newValue: boolean, oldValue: boolean, propName:string) {
   
    console.log(`The new value of ${
     propName} is: `, newValue);
  }
}

mehtod

可以方便的导出函数,方便外部调用。

import {
    Method } from '@stencil/core';

export class TodoList {
   

  @Method()
  async showPrompt() {
   
    // show a prompt
  }
}

// used registered
el.showPrompt();

Element

@Element 装饰器是如何访问类实例中的 host 元素。这将返回一个 HTMLElement 实例,因此可以在此处使用标准 DOM 方法/事件。

import {
    Element } from '@stencil/core';

...
export class TodoList {
   

  @Element() el: HTMLElement;

  getListHeight(): number {
   
    return this.el.getBoundingClientRect().height;
  }
}

其它

Event 和 Listen 装饰器将在下一节 事件 中讲解。

相关文章
|
NoSQL 数据可视化 MongoDB
mongoDB入门教程二:推荐一款好用的mongoDB可视化工具Robo 3T
mongoDB入门教程二:推荐一款好用的mongoDB可视化工具Robo 3T
655 1
mongoDB入门教程二:推荐一款好用的mongoDB可视化工具Robo 3T
|
消息中间件 缓存 NoSQL
如何实现消费幂等 ?
这篇文章,我们聊聊消息队列中非常重要的最佳实践之一:**消费幂等**。
如何实现消费幂等 ?
|
10月前
|
存储 NoSQL JavaScript
【赵渝强老师】MongoDB的客户端工具
MongoDB 是一个基于分布式文件存储的 NoSQL 数据库,提供了命令行客户端工具 mongoshell 和图形化工具 MongoDB Compass。mongoshell 可以进行数据查询和管理操作,而 MongoDB Compass 则支持可视化查询、聚合和数据分析。本文介绍了如何使用 mongoshell 连接 MongoDB 服务器、创建数据库和集合、插入数据以及配置命令提示符。同时,还展示了 MongoDB Compass 的主界面及其功能。
982 0
|
11月前
|
XML JavaScript 前端开发
SVG学习
【10月更文挑战第1天】
190 3
|
缓存 资源调度 JavaScript
Vue3+TS+Vite开发组件库并发布到npm
**vue-amazing-ui 组件库** 是一个基于 Vue 3 的高质量 UI 组件库,提供了丰富的组件和工具函数。该库已发布至 npm,可通过 `pnpm i vue-amazing-ui`、`yarn add vue-amazing-ui` 或 `npm install vue-amazing-ui` 安装使用。组件包括按钮、面包屑、卡片、日期选择器等,同时提供了日期格式化、节流、防抖等实用工具函数。项目结构清晰,支持按需加载,并提供了详细的文档与在线预览。
277 1
Vue3+TS+Vite开发组件库并发布到npm
|
开发框架 JavaScript 前端开发
Web Component -- 即将爆发的原生的 UI 组件化标准
Web Component -- 即将爆发的原生的 UI 组件化标准
|
移动开发 前端开发 JavaScript
惊爆!一键解锁HTML父页面神秘技能,子页面Dialog华丽登场,让你的网页交互瞬间高大上,用户体验飙升!
【8月更文挑战第4天】在Web开发中,常需从父页面弹出子页面或对话框(Dialog)进行互动。HTML5虽引入了&lt;dialog&gt;元素,但许多开发者偏好使用自定义方案以获得更好的兼容性和样式控制。本示例利用HTML、CSS及JavaScript创建一个可弹出子页面的模态框:首先,在父页面中定义一个按钮触发弹出效果;接着,设置隐藏的模态框容器,内含一个iframe用于加载子页面;然后,通过CSS设定模态框样式;最后,借助JavaScript控制模态框的显示与隐藏。此方案灵活且易于定制,适用于多种应用场景。
405 12
|
缓存 前端开发
keep-alive缓存三级及三级以上路由
keep-alive缓存三级及三级以上路由
500 0
|
前端开发 JavaScript API
2024 Web 新特性 - 使用 Popover API 创建弹窗
Popover API简化了Web弹窗创建,标准化处理在所有主要浏览器中可用。它提供声明式创建弹出式菜单、提示和信息卡片,解决代码冗余和兼容性问题。弹窗自动定位在顶层,支持通过Esc键或点击外部关闭,且与触发元素语义关联。基础用法涉及`popover`和`popovertarget`属性。
270 0
|
JSON JavaScript 数据格式
vue展示json数据,vue-json-viewer的使用
vue展示json数据,vue-json-viewer的使用
346 0