Vue 3.0中jsx语法的使用
作者:Mondo 时间:2023-07-02 17:07:17
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
来源:https://segmentfault.com/a/1190000038156128?utm_source=tuicool&utm_medium=referral
标签:Vue,3.0,jsx,语法
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
复制粘贴功能的Python程序
2023-10-02 18:46:51
Asp 返回引用类型函数代码
2011-03-10 10:44:00
innodb_index_stats导入备份数据时报错表主键冲突的解决方法
2024-01-19 19:33:51
MYSQL5.6.33数据库主从(Master/Slave)同步安装与配置详解(Master-Linux Slave-windows7)
2024-01-17 00:23:34
![](https://img.aspxhome.com/file/2023/5/88485_0s.png)
Python中拆分字符串的操作方法
2023-12-20 00:43:24
![](https://img.aspxhome.com/file/2023/8/86548_0s.png)
Android App端与PHP Web端的简单数据交互实现示例
2023-07-02 08:16:16
![](https://img.aspxhome.com/file/2023/6/138356_0s.png)
asp实现非大小写的替换函数
2010-05-19 21:23:00
Python中的type与isinstance的区别详解
2021-12-06 19:30:57
![](https://img.aspxhome.com/file/2023/4/121884_0s.png)
python被修饰的函数消失问题解决(基于wraps函数)
2021-07-22 17:32:34
用Python的urllib库提交WEB表单
2023-06-11 00:14:52
Python实现的桶排序算法示例
2021-01-04 09:09:14
![](https://img.aspxhome.com/file/2023/4/110364_0s.png)
python pandas合并Sheet,处理列乱序和出现Unnamed列的解决
2022-08-26 06:23:41
golang游戏等资源压缩包创建和操作方法
2024-04-30 10:00:22
Python中集合类型(set)学习小结
2023-03-18 13:56:27
ASP访问带多个参数的存储过程
2008-10-14 16:45:00
SQL SERVER 中构建执行动态SQL语句的方法
2024-01-22 10:01:46
使用Django的模版来配合字符串翻译工作
2023-11-17 06:03:47
Python中flatten( )函数及函数用法详解
2023-11-28 04:09:47
js数字转换为float,取N位小数
2024-05-03 15:08:33
Python 内置函数memoryview(obj)的具体用法
2023-03-20 14:40:58