vue组件jsx语法的具体使用

发布时间：2020-12-17 02:57:31 所属栏目：百科来源：网络整理

导读：如果使用render函数来写比较复杂的vue组件，对于可读性和可维护性都很不友好，而使用jsx就会让我们回到更接近于模板的语法。babel转译器会将jsx转译为render函数渲染。配置需要用到babel插件安装 .babelrc配置在plugins中添加transform-vue-jsx 基础示例

如果使用render函数来写比较复杂的vue组件，对于可读性和可维护性都很不友好，而使用jsx就会让我们回到更接近于模板的语法。babel转译器会将jsx转译为render函数渲染。

配置

需要用到babel插件

安装

.babelrc配置

在plugins中添加transform-vue-jsx

基础示例

转义前

转译后

Note：h函数为vue实例的$createElement方法，必须存在于jsx的作用域中，在渲染函数中必须以第一个参数传入，如：

}

自动注入h函数

从3.4.0开始，在用ES2015语法声明的方法和getter访问器中(使用function关键字或箭头函数除外)，babel会自动注入h（const h = this.$createElement）函数，所以可以省略(h)参数。

},myMethod: function () { // h 不会注入 return

},someOtherMethod: () => { // h 不会注入 return

} })

@Component
class App extends Vue {
get computed () { // h 会自动注入
return <div id="foo">bar

}
}

Vue JSX 和 React JSX对比

首先， Vue2.0 的vnode 格式与react不同，createElement函数的第二个参数是一个数据对象，接受一个嵌套的对象，每一个嵌套对象都会有对应的模块处理。

Vue2.0 render语法

对应的Vue2.0 JSX语法

) }

JSX展开运算符

支持JSX展开，插件会智能的合并数据属性，如：

合并后的数据为：

Vue 指令

JSX对大多数的Vue内建指令都不支持，唯一的例外是v-show，该指令可以使用v-show={value}的语法。大多数指令都可以用编程方式实现，比如v-if就是一个三元表达式，v-for就是一个array.map()等。

如果是自定义指令，可以使用v-name={value}语法，但是改语法不支持指令的参数arguments和修饰器modifier。有以下两个解决方法：

将所有内容以一个对象传入，如：v-name={{ value,modifier: true }}

使用原生的vnode指令数据格式，如：

return <div {...{ directives }}/>

原文地址(https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!