【本系列内容直达：】
手把手带你学习Odoo OWL组件开发（1）：认识 OWL
手把手带你学会Odoo OWL组件开发（2）：OWL的使用
手把手带你学会Odoo OWL组件开发（3）：核心内容指南
手把手带你学会Odoo OWL组件开发（4）：OWL组件
手把手带你学会Odoo OWL组件开发（5）：浅析OWL原理
手把手带你学会Odoo OWL组件开发（6）：API
手把手带你学会Odoo OWL组件开发（7）：OWL项目实战使用

【本篇内容：OWL组件】

API

template (string)

组件所关联的xml部分，t-name=“xxx”的值，或者jsx写法，在owl的js中书写

示例：

class OwlConfirm extends  Component{static  template= "owl_confirm";static template = static template = xml`<div class="bg-info text-center p-2"><b t-esc="start.title">  </b><t t-esc="data.Name"></t><i class="fa fa-close p-1 float-right"style="cursor: pointer;"t-on-click="onRemove"> </i></div>`
}

components (Object,optional)

object：组件下有哪些子组件 optional：自定义属性，

示例：

class OwlConfirm extends  Component{static  template= "owl_confirm";static components = { OwlRadios };
}

Props（Object，optional）

组件传值，的参数，拥有一个对象，和是否校验这个传值类型是否正确

type: 类型
element: 设定Object中每一项的类型

optional: 是否校验 blooer

示例：

class ComponentA extends owl.Component {static props = ['id', 'url'];...
}class ComponentB extends owl.Component {static props = {count: {type: Number},messages: {type: Array,element: {type: Object, shape: {id: Boolean, text: String }},date: Date,combinedVal: [Number, Boolean],optionalProp: { type: Number, optional: true }};...
}

Owl 组件传值

▪ Prop

父组件传值给子组件

class Child extends Component {static template = xml`<div><t t-esc="props.a"/><t t-esc="props.b"/></div>`;
}class Parent extends Component {static template = xml`<div><Child a="state.a" b="'string'"/></div>`;static components = { Child };state = useState({ a: "fromparent" });
}

▪ EventBus

事件传值 owl的eventBus主要用法、

on 传值（eventType, owner, callback）事件名，传值内容，回调

off 销毁事件传值

const { EventBus } = owl.core;
const bus = new EventBus();
//传值
let model = {
a:1,b:'string'
}
bus.on("event",model,()=>console.log('传值'));
//取值
const b = bus.subscriptions['event'][0].owner；
console.log(b);
bus.off("event")//销毁

▪ 子传父

想要获取子组件数据，就可以通过下列方式

this.__owl__.parent.getChildrenMsg(this.data.msg),

Owl 插槽t-slot

子组件内部内容由父组件提供，就是插槽

匿名插槽

匿名插槽，就是一般默认插槽方式，在子组件中只有一个插槽时使用较多，默认值是 t-slot=“default ”，这个时候在父组件中的子组件写入的标签，和内容等都会直接插入到子组件中展示，

具名插槽

具名插槽，顾名思义，就是，子组件的内如插槽，是有名字的，只有渲染对应名字的插槽内容。如下的t-slot=“header”和t-slot=“foot”都是具名插槽，在父组件中，设置插槽名有两种

t-set-slot=“header” 一种是设置

slots=“foot” 一种是直接选定

XML部分

子组件
&lt;t t-name="owl_radios" owl="1"><div calss="owl-radios">&lt;t t-slot="default" >&lt;/t>&lt;t t-slot="foot" >&lt;/t>&lt;t t-slot="header">&lt;/t></div>
&lt;/t>父组件
&lt;t t-name="owl_confirm" owl="1"><div><div class="owl-popup-mask"></div><div class="owl-confirm-xl" id="owlConfirm"><div class="owl-confirm-title">上面的子组件<OwlRadios  ><p>sssss</p><div  slots="foot" url="sss"><h2>车船税</h2></div><div t-set-slot="header"><h2>22222sss</h2></div></OwlRadios></div><div class="owl-confirm-btn"><div t-on-click="confimrBtn" class="btn btn-primary">确定</div><div t-on-click="closeConfim" class="btn  btn-white  ml20">取消</div></div></div></div>
&lt;/t>

JS部分

注意，子组件的class必须在父组件之前，不然会报错。

odoo.define('owl_components', function (require) {"use strict";const { Component, useState ,hooks} = owl;const { xml } = owl.tags;const { useRef,useSubEnv, onMounted, onWillStart} = hooks;const {ComponentWrapper} = require("web.OwlCompatibility");class  OwlRadios extends  Component{static  template= "owl_radios";mounted(){console.log(this.props)}}class OwlConfirm extends  Component{static  template= "owl_confirm";static components = { OwlRadios };setup() {this.state = useState({ title: "測試",row:this.__owl__.parent.parentWidget.recordData,name:''});this.state.title = 'xxxxxxxx内容部分'this.inputRef = useRef("someDiv");const model = {a:1,b:'ssss'};useSubEnv(model);}someMethod() {console.log(this.inputRef)}changeVal(){console.log(this.state.name)}confimrBtn(url){console.log(this.state.row,'确定');let self = this;console.log(this.env,'ssss')}//关闭closeConfim(){this.destroy();}}return  {OwlConfirm,}
});

Owl 动态组件 t-component

组件插槽

可以动态根据条件渲染子组件。

class A extends Component {static template = xml`<div>child a</div>`;
}
class B extends Component {static template = xml`<span>child b</span>`;
}
class Parent extends Component {static template = xml`<t t-component="myComponent"/>`;state = useState({ child: "a" });get myComponent() {return this.state.child === "a" ? A : B;}
}

今天的内容就到这里，我们下期再见！

手把手带你学会Odoo OWL组件开发（4）：OWL组件相关推荐

手把手带你学会Odoo OWL组件开发（5）：浅析OWL原理
[本系列内容直达:] 手把手带你学习Odoo OWL组件开发(1):认识 OWL 手把手带你学会Odoo OWL组件开发(2):OWL的使用手把手带你学会Odoo OWL组件开发(3):核心内容指南 ...
手把手带你学会Odoo OWL组件开发（2）：OWL的使用
[本系列内容直达:] [手把手带你学习Odoo OWL组件开发(1):认识 OWL] [手把手带你学会Odoo OWL组件开发(2):OWL的使用] [手把手带你学会Odoo OWL组件开发(3):核 ...
视频教程-手把手带你学会python爬虫-Python
手把手带你学会python爬虫曾在某大型公司大型互联网任职多年,在公司主要从事移动端开发.全栈开发.主要技术栈是Android.Java.Python.爬虫.Linux等等. 赵庆元 ¥99.00 ...
自定义组件开发六自定义组件
概述 Android SDK 为我们提供了一套完整的组件库,数量多.功能强,涉及到方方面面,但是,我们依然看到软件市场上的每个 App 都有自己独特的东西,绝不是千遍一律的,而且也会和 IOS相互借鉴 ...
Vue 组件开发 - 数据输入框组件
目录设计通用组件的一般思路组件效果 1. HTML结构 2. index.js 3. input-number.js 3.1 input-number.js代码注解设计通用组件的一般思路明确需 ...
web前端组件开发之弹窗组件实现
widget 抽象类首先抽象出弹窗组件的一些共有属性和方法. widget抽象类中定义一个最外层容器,即整个弹窗,在widget构造函数中,添加一个属性: this.boundingBox = n ...
给我5分钟，手把手带你学会定时任务！
一. 前言最近经常有小伙伴问辉哥,咋能快速实现定时任务呀?看了一堆Quartz.XXL-Job.Elastic-Job等,看的是眼花缭乱懵懵懂懂的,有没有更简单的方式呢?来,今天辉哥手把手地带着你学 ...
MySQL实战课程---通过录像手把手带您学会当前互联网流行架构
通过本课程,可以让您学会当前互联网流行的高可用架构搭建MHA(Master High Availability),VIP机制不采用Keepalived实现(会出现脑裂),通过修改脚本实现.以及读写分离 ...
新手运营shopee不知道如何选品？手把手带你学会，成为选品达人！
shopee最近的爆火,引来了许多新手商家入驻,导致很多人都不知道如何选品,不少人都有疑问,为什么店铺经营这么久没有什么流量呢? 很重要的原因就可能使选品没有做好,店铺运营事业的开端就是选择适合自己店 ...

手把手带你学会Odoo OWL组件开发（4）：OWL组件

目录

API

template (string)

components (Object,optional)

Props（Object，optional）

Owl 组件传值

▪ Prop

▪ EventBus

▪ 子传父

Owl 插槽t-slot

匿名插槽

具名插槽

Owl 动态组件 t-component

组件插槽

手把手带你学会Odoo OWL组件开发（4）：OWL组件相关推荐

最新文章

热门文章