只能在render函數(shù)里面使用JSX嗎
當(dāng)然不是，你可以定義method放闺，然后在method里面返回JSX,然后在render函數(shù)里面調(diào)用這個(gè)方法祟昭，不僅如此，JSX還可以直接賦值給變量怖侦，比如下面這段代碼
methods: {
$_renderFooter() {
return (
<div>
<ElButton>確定</ElButton>
<ElButton>取消</ElButton>
</div>
)
}
},
render() {
const buttons = this.$_renderFooter()
return (
<ElDialog visible={this.visible}>
<div>這里是一大坨內(nèi)容</div>
<template slot="footer">{buttons}</template>
</ElDialog>
)
}
就算我今天不吃晚飯篡悟，也要把指令給大家講講
基礎(chǔ)用法
雖然大部分內(nèi)置的指令無法直接在JSX里面使用谜叹，但是自定義的指令可以在JSX里面使用，就拿element-ui的v-loading指令來說恰力，可以這樣用
render() {
/**
* 一個(gè)組件上面可以使用多個(gè)指令叉谜，所以是一個(gè)數(shù)組
* name 對(duì)應(yīng)指令的名稱旗吁， 需要去掉 v- 前綴
* value 對(duì)應(yīng) `v-loading="value"`中的value
*/
const directives = [{ name: 'loading', value: this.loading }]
return (
<div
{...{
directives
}}
></div>
)
}
修飾符
有些指令還可以使用修飾符,比如上例中的v-loading,你可以通過修飾符指定是否全屏遮罩踩萎，是否鎖定屏幕的滾動(dòng)，這時(shí)候就需要這樣寫 v-loading.fullscreen.lock = "loading"
render() {
/**
* modifiers指定修飾符很钓，如果使用某一個(gè)修飾符香府，則指定這個(gè)修飾符的值為 true
* 不使用可以設(shè)置為false或者直接刪掉
*/
const directives = [
{
name: 'loading',
value: this.loading,
modifiers: { fullscreen: true, lock: false }
}
]
return (
<div
{...{
directives
}}
></div>
)
}
總結(jié)
好了，今天講到這里已經(jīng)把vue JSX講完了码倦。這一內(nèi)容基本上講的差不多了企孩。覺得對(duì)您有幫助的可以幫忙點(diǎn)個(gè)贊。在這里謝謝大家了袁稽。我會(huì)不斷出新的優(yōu)質(zhì)的文章給大家分享勿璃，一起學(xué)習(xí)進(jìn)步。
