odoo owl use protal 本质


Port是owl的重要功能, 目的是用于子组件不在父组件子dom节点的情况, 但又希望消息等能按扭组件的层级进行传递, 如对话框等, 对话框一般都是挂在body上,但写的时候又是某个特定组件的子组件。 这个组件有个好处, 就是可以将内容非常方便的放置在任何地方。废话少说,上代码。

    class Portal extends Component {
        constructor(parent, props) {
            super(parent, props);
            // boolean to indicate whether or not we must listen to 'dom-appended' event
            // to hook on the moment when the target is inserted into the DOM (because it
            // is not when the portal is rendered)
            this.doTargetLookUp = true;
            // set of encountered events that need to be redirected
            this._handledEvents = new Set();
            // function that will be the event's tunnel (needs to be an arrow function to
            // avoid having to rebind `this`)
            this._handlerTunnel = (ev) => {
                ev.stopPropagation();
                this.__trigger(ev.originalComponent, ev.type, ev.detail);


可以看出,本质是个component, 所以它自身也有自身的dom节点, 同时, 它有一个target选择器, 这个选择器的作用就是选择portal的地点,所以,这个组件初始化的时候,需要保证目标节点可访问。免费培训进行中,扫描下方二维码加群了解详细信息。

扫描二维码加群免费参加odoo后端培训,群内定期分享各种odoo相关知识


Funenc Json Template Widget 源码下载