Vue 3.0中jsx語法的使用

更新時間：2020年11月13日 11:35:37 作者：Mondo

這篇文章主要介紹了Vue 3.0 中 jsx 語法使用，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下

Vue 3.0 正式發(fā)布了，喜大普奔😁。新的語法又要學習一陣陣，不過需要在生產環(huán)境下大面積使用，可能需要等到它的周邊工具：vuex，vue-router 等等全部升級完畢。

Vue 3.0 中尤大使用的了新的編譯工具 vite，革了 webpack 的命😂。嘗試看了下文檔，發(fā)現(xiàn)支持 jsx 語法，由于這段時間都是在使用 react 來開發(fā)項目，jsx 完全不同的體驗，更加的純粹與靈活。

項目創(chuàng)建

npm init vite-app vite-vue
cd vite-vue
npm install
npm run dev

我們發(fā)現(xiàn)創(chuàng)建的目錄解構很簡單

使用 JSX

Vue 3.0 直接支持 jsx 語法，新建 demo.jsx

export default function JsxTemp() {
 return <div>
 <h3>jsx</h3>
 </div>
}

引入到 App.vue 中可以完整顯示

再嘗試綁定數(shù)據(jù)

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>
}

我們發(fā)現(xiàn)沒有像我們想的那樣 state 數(shù)一直自增😅

這是因為我們在 Vue 3.0 中需要使用 defineComponent 包裹來使其變成一個雙向綁定數(shù)據(jù)的組件
參數(shù) 為 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>
 )
})

可以看到現(xiàn)在是實時點擊實現(xiàn)自增效果

組件通信

組件間傳值通信該怎么來實現(xiàn)呢😮

我們需要改用對象的方式來傳入通信數(shù)據(jù)

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>
 )
 }
})

實現(xiàn)效果