Odoo 14前端框架OWL之快速概览

Odoo Alan 4年前 (2020-08-26) 7519次浏览 1个评论 扫描二维码

完整目录请见Odoo 14全新前端框架 OWL(Odoo Web Library)官方文档中文版

🦉 快速总览 🦉

应用中的Owl组件用于定义一个(动态)组件树。

状态(state):各组件可管理其自身的本地状态。这是一个简单的ES6类,没有特殊规则:

以上示例展示了一个具有本地状态的组件。注意state对象并没有什么超能力,因此在其更新时我们需要手动地调用render函数。这很容易让人觉得麻烦(多次进行时会显得低效)。有一种更好的方式:使用useState钩子,它将对象转化为其自身的响应式(reactive)版本:

注意还可以使用行内语句来替换掉t-on-click这一handler:

属性(props):子组件经常需要从父组件获取一些信息。这可通过向模板添加所需信息来实现。然后通过props对象中的子组件进行获取。注意有一条重要规则:props对象中包含的信息不由子组件持有,不应进行修改。

通信:有很多种方式在组件间进行信息通讯。但最重要的两种方式如下:

  • 使用props从父组件向子组件通信,
  • 通过触发事件从子组件向父组件通信

以下的示例描述了这两种机制:

本例中,OrderLine组件触发了一个add-to-order事件。这会生成一个与DOM树一起冒泡的DOM事件。然后由父组件拦截,接着(从detail键)获取该行并增加其数量。参见事件处理一页获取事件运行的更多详情。

注意在OrderLine组件直接修改line对象时也会有效。但这不是一种好的做法:它有效是因为从子组件所接收到的props是响应式的,因此子组件会与父组件的实现之间进行配对。

喜欢 (5)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 签到成功!签到时间:2020-10-09 11:22:38,每日打卡,生活更精彩哦~
    底萨多2020-10-09 13:18 回复