Vue 3.0中jsx語法的使用
阿新 • • 發佈:2020-11-15
Vue 3.0 正式釋出了,喜大普奔😁。新的語法又要學習一陣陣,不過需要在生產環境下大面積使用,可能需要等到它的周邊工具:vuex,vue-router 等等全部升級完畢。
Vue 3.0 中尤大使用的了新的編譯工具 vite,革了 webpack 的命😂。嘗試看了下文件,發現支援 jsx 語法,由於這段時間都是在使用 react 來開發專案,jsx 完全不同的體驗,更加的純粹與靈活。
專案建立
npm init vite-app vite-vue cd vite-vue npm install npm run dev
我們發現建立的目錄解構很簡單
使用 JSX
Vue 3.0 直接支援 jsx 語法,新建 demo.jsx
export default function JsxTemp() { return <div> <h3>jsx</h3> </div> }
引入到 App.vue 中可以完整顯示
再嘗試繫結資料
import { ref } from 'vue' export default function JsxTemp() { const state = ref(0) const onClick = () => { state.value++; console.log(state.value) } return <div> <h3>state: {state.value}</h3> <button onClick={onClick}>點選</button> </div> }
我們發現沒有像我們想的那樣 state 數一直自增😅
這是因為我們在 Vue 3.0 中需要使用 defineComponent 包裹來使其變成一個雙向繫結資料的元件
引數 為 setup function | object
import { defineComponent,ref } from 'vue' export default defineComponent(() => { const state = ref(0) const onClick = () => { state.value++; console.log(state.value) } return () => ( <div> <h3>state: {state.value}</h3> <button onClick={onClick}>點選</button> </div> ) })
可以看到現在是實時點選實現自增效果
元件通訊
元件間傳值通訊該怎麼來實現呢😮
我們需要改用物件的方式來傳入通訊資料
App.vue <JsxTemp site="imondo.cn" @onGet="onGet" /> export default { ... methods: { onGet(e) { console.log('emit:',e) } } } ... export default defineComponent({ props: { site: String },setup({ site }) { const state = ref(0) const onClick = () => { state.value++; console.log(state.value) context.emit('onGet','Mondo'); } return () => ( <div> <h1>props: {site}</h1> <h3>state: {state.value}</h3> <button onClick={onClick}>點選</button> </div> ) } })
實現效果
總結
我們嘗試了在 Vue 3.0 中如何使用 jsx ,這有助於我們在專案中更靈活的公用我們元件,由此也可以區分我們在專案中使用的方式
- 無狀態元件 我們完全可以使用純函式來展示
- 有狀態元件 存在邏輯與資料繫結的元件則需要使用 Vue 3.0 提供的一系列元件 API
以上就是Vue 3.0 中 jsx 語法使用的詳細內容,更多關於Vue 3.0 jsx 語法的資料請關注我們其它相關文章!