詳解利用jsx寫vue組件的方法示例
前言
本文主要給大家介紹的是關(guān)于利用jsx寫vue組件，下面話不多說，來一起看看詳細(xì)的介紹吧。
我們平常寫vue的組件時，一般都是用的是模版，這種方式看起來比較簡潔，而且vue作者也推薦使用這個方式，但是這種方式也有一些它的弊端，例如模版調(diào)試麻煩，或者在一些場景下模版描述可能沒那么簡單和方便。
下面我們要講的是如何在vue里面寫jsx，知道react的人應(yīng)該都知道jsx，jsx的一個特性就是非常靈活，雖然有的人覺得jsx很丑陋，把邏輯都寫到模版的感覺，但蘿卜青菜各有所愛，適合自己適合團(tuán)隊的就是最好的。
在使用jsx之前我們需要安裝一個babel插件（babel-plugin-transform-vue-jsx ）
安裝方式：
npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-es2015\ --save-dev
然后再.babelrc里面添加：
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
接著我們就可以愉快地在vue里面編寫jsx了。
Test.vue
<script>
export default {
props: ['onClick', 'isShow'],
data() {
return {
test: 123
};
},
render() {
return (
<div class="test" onClick={ this.onClick }>
{ this.test }
{ this.isShow + '' }
</div>
);
}
}
</script>
可以看到我們把jsx寫在了render方法里面，render方法是vue2.0才支持的，用來提供對虛擬DOM的支持，也就是說只有vue2.0才支持jsx語法轉(zhuǎn)換。
這里要注意的一點是vue里面編寫jsx和在react里面的jsx語法還是有一點不一樣的。
以下是一段覆蓋大部分語法的vue jsx代碼：
render (h) {
return (
<div
// normal attributes or component props.
id="foo"
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={this.clickHandler}
nativeOnClick={this.nativeClickHandler}
// other special top-level properties
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
</div>
)
}
可以看到DOM屬性要加domProps前綴，但這里lass和style卻不需要，因為這兩個是特殊的模塊，而且react的class用的是className，vue卻用的class。事件監(jiān)聽是以“on”或者“nativeOn”為開始。
實際上vue2.0的模版最后都會被編譯為render方法，所以模版聲明的組件和jsx聲明的組件最后都是一樣的。
上面的jsx最后會被編譯成下面這樣：
render (h) {
return h('div', {
// Component props
props: {
msg: 'hi'
},
// normal HTML attributes
attrs: {
id: 'foo'
},
// DOM props
domProps: {
innerHTML: 'bar'
},
// Event handlers are nested under "on", though
// modifiers such as in v-on:keyup.enter are not
// supported. You'll have to manually check the
// keyCode in the handler instead.
on: {
click: this.clickHandler
},
// For components only. Allows you to listen to
// native events, rather than events emitted from
// the component using vm.$emit.
nativeOn: {
click: this.nativeClickHandler
},
// class is a special module, same API as `v-bind:class`
class: {
foo: true,
bar: false
},
// style is also same as `v-bind:style`
style: {
color: 'red',
fontSize: '14px'
},
// other special top-level properties
key: 'key',
ref: 'ref',
// assign the `ref` is used on elements/components with v-for
refInFor: true,
slot: 'slot'
})
}
這也意味著兩種形式的組件是可以相互引用的。
有時候我們難免會在模版里引入jsx編寫的vue組件或者在jsx編寫的vue組件里引入模版組件，這里還是有些需要注意的事項：
1.在模版里面引入jsx的組件，可以通過components引用，另外props的編寫從駝峰式改為連接符：
<template>
<div class="wrapper">
<Test :on-click="clickHandler" :is-show="show"></Test>
</div>
</template>
<script>
import Test from './Test.vue';
export default {
name: 'hello',
components: {
Test
},
data() {
return {
msg: 'Welcome to Your Vue.js App',
show: true
};
},
methods: {
clickHandler(){
this.show = !this.show;
}
}
};
</script>
2.在jsx里面引入vue模版組件，這里沒有什么要注意的，除了連接符式的屬性要轉(zhuǎn)換成駝峰式，還有一個需要注意的是指令，如果用了jsx，那么內(nèi)置的指令都不會生效（除了v-show），好在內(nèi)置指令大部分都可以用jsx描述。那么自定義指令要怎么用呢？
自定義指令可以使用“v-name={value} ”語法，如果要支持指令參數(shù)和modifier可以用“v-name={{ value, modifier: true }} ”語法：
<script>
import Vue from 'vue';
Vue.directive('my-bold', {
inserted: function (el) {
el.style.fontWeight = 900;
}
})
export default {
props: ['onClick', 'isShow'],
data() {
return {
test: 123
};
},
methods: {
afterLeave() {
console.log('afterLeave')
}
},
render() {
const directives = [
{ name: 'my-bold', value: 666, modifiers: { abc: true } }
];
return (
<transition onAfterLeave={this.afterLeave} name="fade">
<div class="test" onClick={this.onClick} v-show={ this.isShow } v-my-bold>
{this.test}
{this.isShow + ''}
</div>
</transition>
);
}
}
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
</style>
我們還可以用原生vnode的數(shù)據(jù)格式使用自定義指令：
const directives = [
{ name: 'my-dir', value: 123, modifiers: { abc: true } }
]
return <div {...{ directives }}/>
擴(kuò)展
如果有人覺得在vue組件里面要寫data，props，computed和methods不夠優(yōu)雅，可以參考下這個插件vue-class-component，它能讓你使用ES6的class和ES7的裝飾器編寫vue組件。
相關(guān)鏈接：
babel-plugin-transform-vue-jsx
總結(jié)
以上就是這篇文章的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue2遞歸組件實現(xiàn)樹形菜單的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
vue+elementui實現(xiàn)下拉表格多選和搜索功能
這篇文章主要為大家詳細(xì)介紹了vue+elementui實現(xiàn)下拉表格多選和搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)兩個區(qū)域滾動條同步滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)折線圖，可按時間查詢，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了Vue3?PC端頁面開發(fā)規(guī)范及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家介紹了Vue3?重構(gòu)函數(shù)透傳示例解析2023-02-02
vue實現(xiàn)錨點跳轉(zhuǎn)之scrollIntoView()方法詳解
這篇文章主要介紹了vue實現(xiàn)錨點跳轉(zhuǎn)之scrollIntoView()方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue?Echarts實現(xiàn)實時大屏動態(tài)數(shù)據(jù)顯示
同大多數(shù)的前端框架一樣，先讀官網(wǎng)的使用方法。學(xué)會基本使用后，在實例中找到自己想要demo。拿過來改一改，一個echarts圖表就形成，畢竟人家做就是為了方便使用，這篇文章主要介紹了Vue?Echarts實現(xiàn)實時大屏動態(tài)數(shù)據(jù)顯示2022-10-10
elementui?el-select?change事件傳參問題
這篇文章主要介紹了elementui?el-select?change事件傳參問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue router的addRoute方法實現(xiàn)控制權(quán)限方法詳解
這篇文章主要介紹了vue動態(tài)路由添加，vue-router的addRoute方法實現(xiàn)權(quán)限控制流程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09