Odoo 14前端框架OWL之如何编写单文件组件？

Alan

4 年前

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

🦉 如何编写单文件组件？ 🦉

将代码按照功能而非文件类型进行分组大有裨益。这样会更易于扩展为更大规模的应用。

为此，Owl包含了两个帮助标签，来使得在javascript（或typescript）中定义模板或样式更为简便：xml 和 css帮助标签。

这表示模板、样式和javascript代码都可以在同一个文件中进行定义。示例如下：

const { Component } = owl;
const { xml, css } = owl.tags;

// -----------------------------------------------------------------------------
// TEMPLATE
// -----------------------------------------------------------------------------
const TEMPLATE = xml/* xml */ `
	<div class="main">
		<Sidebar/>
		<Content />
	</div>`;

// -----------------------------------------------------------------------------
// STYLE
// -----------------------------------------------------------------------------
const STYLE = css/* css */ `
  .main {
    display: grid;
    grid-template-columns: 200px auto;
  }
`;

// -----------------------------------------------------------------------------
// CODE
// -----------------------------------------------------------------------------
class Main extends Component {
  static template = TEMPLATE;
  static style = STYLE;
  static components = { Sidebar, Content };

  // rest of component...
}

const { Component } = owl;

const { xml, css } = owl.tags;

// -----------------------------------------------------------------------------

// TEMPLATE

// -----------------------------------------------------------------------------

const TEMPLATE = xml/* xml */ `

</div>`;

// -----------------------------------------------------------------------------

// STYLE

// -----------------------------------------------------------------------------

const STYLE = css/* css */ `

.main {

display: grid;

grid-template-columns: 200px auto;

}

// -----------------------------------------------------------------------------

// CODE

// -----------------------------------------------------------------------------

class Main extends Component {

static template = TEMPLATE;

static style = STYLE;

static components = { Sidebar, Content };

// rest of component...

}

注意在上例的xml调用后面有一个行内xml注释。对于一个编辑器插件，如VS Code 的Comment tagged template，会在安装后对模板字符串的内容进行语法高亮显示。