手把手带你学会Odoo OWL组件开发（2）：OWL的使用

【本系列内容直达：】
[手把手带你学习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的使用】

目录

odoo中使用owl

重点

什么是声明式渲染？

owl的声明式是什么样的呢?

为什么前端主流框架都是声明式的渲染方式？

弹窗案例（owl）

---

上一篇我们对odoo owl做了一个简单介绍，从本篇开始我们将手把手教你如何通过owl开发odoo项目，今天我们通过一个简单的“hello world”示例来看下owl 在odoo中如何使用。

odoo中使用owl

1.首先创建一个father.js文件，然后创建一个templates.xml文件，并且清单文件__manifest__.py中引用templates.xml文件，

demo.js示例：

odoo.define('owl_demo_view', function (require) {
    //必须引入部分
    const { Component, useState ,hooks} = owl;
    const { xml } = owl.tags;
    const { useRef, onMounted, onWillStart} = hooks;
    const {ComponentWrapper} = require("web.OwlCompatibility");
    //qweb,单页面渲染引入部分
    var core = require('web.core');
    var AbstractAction = require('web.AbstractAction');
    //创建元素并展示
    class Parent extends Component {
        //static template = 'owl_demo' //方案一 xml綁定
        //方案二 xml，编写
        static template = xml`
                

                    
                
`
        setup() {
            this.state = useState({
                title:'Hello World'
            });
        }
    }
    //实例化qweb页面
    var test_owl = AbstractAction.extend({
        start: function () {
            self = this
            $(document).ready(function () {
                for(const element of self.el.querySelectorAll(".o_content")){
                    //创建实例并挂载到对应元素中
                    (new ComponentWrapper(self, Parent)).mount(element);
                }
            });
            //第二种实例化挂载方式
            const app = new Parent();
            console.log(app,'owl实例')
            //挂载在页面的那个位置 ,这里的document.body是可以换的
            for(const element of self.el.querySelectorAll(".o_content")){
                    //创建实例并挂载到对应元素中
                    app.mount(element);
            }
             
        },
    })
    core.action_registry.add('owl_demo_view', test_owl);
    return test_owl
 
 
})

templates.xml示例：