qml c++函数 slot_Vue躬行记(7)——渲染函数和JSX

  除了可通过模板创建HTML之外,Vue还提供了渲染函数和JSX,前者的编码自由度很高,后者对于开发过React的人来说会很熟悉。注意,Vue的模板最终都会被编译成渲染函数。

一、渲染函数

  虽然在大部分场景中,都会选择直观而清晰的模板,但遇到一些复杂的场景时,就不得不使用渲染函数render()了。

1)render()

  假设有一个page组件,它会根据外部传入的type特性,有选择的渲染,其模板如下所示。

<

  在模板中,充斥着冗余的<slot>元素,并且如果要增加分支,那么还得修改模板,即插入新的条件指令、标题元素和插槽。显然,在这个场景中不适合用模板,接下来替换成render()函数,代码不仅简洁而且更易维护,如下所示。

Vue

  render()函数能接收一个createElement()方法,并返回一个VNode。Vue通过虚拟DOM来高性能的变更真实DOM,而VNode是虚拟节点(Virtual Node)的简写。实例属性$slots是一个对象,其键是插槽的名称,可访问分发给插槽的内容,代码中的default是指默认插槽。

  注意,若render()函数存在,那么Vue就不会编译template选项中的模板和从el选项所挂载的元素中提取出的模板,即不会将它们转换成渲染函数。

2)createElement()

  该方法可接收3个参数:标签名称、数据对象和虚拟子节点。除了标签名称必传之外,其余两个参数都是可选的,接下来会对这3个参数进行逐一讲解。

  标签名称既可以是一段字符串,也可以是一个返回字符串的函数。并且由于render()函数可以访问this,因此标签名称还可以是data选项的属性、计算属性等,如下所示。

Vue

  数据对象是一个配置信息集合,包含了组件所需的属性以及DOM元素的特性和属性,例如样式、插槽、ref、自定义指令、事件和props等,下面只列出了数据对象的部分字段。

Vue

  Vue还为on选项中的事件提供了与.passive、.capture和.once三个修饰符相对应的前缀,如下所示。

on

  虚拟子节点既可以是字符串,也可以是数组,如下所示。注意,如果需要省略数据对象,那么可直接将虚拟子节点作为第二个参数传入。

Vue

  官方规定组件树中的所有VNode必须要唯一,虽然像下面这样重复引用同一个VNode是不合法的,但是在渲染时并不会报错,仍然能呈现内容。

Vue

二、JSX

  如果要在Vue中使用JSX语法,那么需要先安装一个Babel插件,安装命令如下所示。

npm 

  在安装完之后,就可在配置文件babel.config.js中对其进行配置,如下所示。

module

  经过这一系列的操作后,就能以JSX语法来创建模板,如下所示,为按钮注册了点击事件。注意,render()函数的h参数是createElement的别名。

Vue

  假设上面的代码保存在default.js文件中,并且当前处在该文件的目录中,执行下面这条编译命令,会将编译后的代码保存到当前目录的dist.js文件中。

npx babel default.js --out-file dist.js

  dist.js文件中的代码如下所示,那段JSX代码自动转换成了createElement()方法。

Vue
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt QML是一种基于JavaScript的声明式语言,用于快速构建跨平台的用户界面。它有时需要与C++代码交互,因为C++可以提供更高性能和更底层的功能。 要在Qt QML调用C函数,需要进行以下步骤: 1. 创建一个继承自QObject的C++类,并在其定义所需的函数。这些函数需要使用Q_INVOKABLE宏进行标,以便在QML调用。 ```cpp // MyFunctions.h #include <QObject> class MyFunctions: public QObject { Q_OBJECT public: explicit MyFunctions(QObject *parent = nullptr); Q_INVOKABLE void myFunction(); }; ``` 2. 在QML文件导入C++类,并使用其实例调用函数。 ```qml import MyFunctions 1.0 Window { // ... Button { text: "调用C函数" onClicked: { MyFunctions.myFunction(); } } // ... } ``` 3. 在C++代码将该类注册到QML引擎。 ```cpp // main.cpp #include <QGuiApplication> #include <QQmlApplicationEngine> #include "MyFunctions.h" int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); qmlRegisterType<MyFunctions>("MyFunctions", 1, 0, "MyFunctions"); QQmlApplicationEngine engine; engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); return app.exec(); } ``` 通过以上步骤,就可以在Qt QML成功调用C函数了。在按钮点击事件调用C++类的函数,可以在C++代码执行所需的操作,并将结果返回到QML界面进行展示。这种方式可以实现Qt QML框架与C++高性能功能的结合,使得开发者能够更好地发挥Qt的优秀特性和灵活性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值