如何在 Vue 中使用 JSX

2023-07-05 15:49:03 202

JSX是什么

JSX是一种Javascript的语法扩展，JSX=Javascript+XML，即在Javascript里面写XML，因为JSX的这个特性，所以他即具备了Javascript的灵活性，同时又兼具html的语义化和直观性

有时候，我们使用渲染函数（renderfunction）来抽象组件，渲染函数不是很清楚的参见官方文档,而渲染函数有时候写起来是非常痛苦的

createElement(
'anchored-heading',{
props:{
level:1
}
},[
createElement('span','Hello'),
'world!'
]
)

其对应的模板是下面：


Helloworld!

这显然是吃力不讨好的，这个时候就派上JSX上场了。在Vue中使用JSX，需要使用Babel插件，它可以让我们回到更接近于模板的语法上，接下来就让我们一起开始在Vue中写JSX吧

快读创建一个Vue项目，直接使用vue-cli创建一个项目：

#直接回车即可
vuecreatevue-jsx

安装依赖：

npminstall@vue/babel-preset-jsx@vue/babel-helper-vue-jsx-merge-props

配置.babelrc：

module.exports={
presets:[
'@vue/cli-plugin-babel/preset',
['@vue/babel-preset-jsx',
{
'injectH':false
}]
]
}

这里展示在Vue中书写一些基础内容，包括纯文本、动态内容、标签使用、自定义组件的使用，这些跟我们平时使用单文件组件类似，如下所示：

render(){
return(

内容
{/*纯文本*/}
hello,IamGopal
{/*动态内容*/}
hello{this.msg}
{/*输入框*/}

{/*自定义组件*/}


);
}

Attributes的绑定跟普通的HTML结构一样

render(){
return
}

注意，如果动态属性，之前是v-bind:placeholder="this.placeholderText"变成了placeholder={this.placeholderText}

render(){
return
}

我们也可以展开一个对象

render(createElement){
return(

)
}

像input标签，就可以如下批量绑定属性

constinputAttrs={
type:'email',
placeholder:'Enteryouremail'
};
render(){
return
}

我们来看下怎么实现具名插槽和作用域插槽

具名插槽：父组件的写法和单文件组件模板的类似，通过slot="header"这样方式指定要插入的位置。子组件通过this.$slots.header方式指定插槽的名称，其中header就是插槽的名称

父组件：

render(){
{/*具名插槽*/}

header
content
footer

}

子组件：

render(){
return(

{/*纯文本*/}
我是自定义组件
{this.$slots.header}
{this.$slots.content}
{this.$slots.footer}

);
}

作用域插槽：子组件中通过{this.$scopedSlots.test({user:this.user})}指定插槽的名称是test，并将user传递给父组件。父组件在书写子组件标签的时候，通过scopedSlots值指定插入的位置是test，并在回调函数获取到子组件传入的user值

父组件：

render(){
{/*具名插槽作用域插槽*/}
(
{user.name}
)
}
}
}>

子组件：

render(){
return(

{this.$scopedSlots.test({
user:this.user
})}

);
}

常见的指令如下所示：

render(){
{/*指令*/}
{/*v-model*/}

{/*v-model以及修饰符*/}

{/*v-on监听事件*/}

{/*v-on监听事件以及修饰符*/}

{/*v-html*/}

}

函数式组件是一个无状态、无实例的组件，详见官网说明，新建一个FunctionalComponent.js文件，内容如下：

exportdefault({props})=>hello{props.message}

父组件中调用如下:

importfunComponentfrom'./FunctionalComponent'

...

render(){
return{/*函数式组件*/}

}

以上就是如何在Vue中使用JSX的详细内容，更多关于Vue中使用JSX的资料请关注毛票票其它相关文章！