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的地点,所以,这个组件初始化的时候,需要保证目标节点可访问。免费培训进行中,扫描下方二维码加群了解详细信息。