Vue3 JSX 写法笔记
Vue3 是可以用 JSX 语法直接写的, 大体可以从 https://sfc.vuejs.org/ 的示例看到,
其中 <div>
会编译为 h('div')
, 具体参考 https://vuejs.org/guide/extra... .
完整的组件定义形如:
import { defineComponent, PropType } from 'vue';
import { onMounted, ref, watch } from 'vue';
const App = defineComponent({
name: "App"
props: {
appId: {
type: String as PropType<string>,
default: '',
},
},
emits: [],
setup(props, {emit, expose, slots}) {
return () => (
<div>TODO</div>
);
},
});
export default App;
其中
name
调试中组件的名字,props
需要用这样的写法用 Object 格式传入, 类型部分用PropType<T>
做标记,emits
可以用字符串格式指定事件, 而emit
函数从参数中拿到,slots
也是从参数当中拿到,expose
也是从参数当中得到的,- 注意最终的 render 函数, 范围与
setup
函数有区别, 其中setup
函数只会被执行一次, 而render
函数可能多次执行. 而需要响应式追踪的逻辑, 需要写在setup
函数里边, 否则行为不能达到预期,
有了 JSX, 原有的 v-if
和 v-else
可以和 React 一样直接写了,
<div>
{!!a ? <span>true</span> : null}
</div>
v-model
较为特殊, 转换后需要手动绑定 modelValue
的行为:
<A modelValue={a.value} onUpdate:modelValue={(v) => a.value = v} />
expose
的用法, 传入一个对象, 参考 https://www.vuemastery.com/bl...
expose({ reset })
@click
写法统一变成 on
加上大写首字符,
<div onClick={() => console.log("TODO")} >
v-slots
用法比较复杂, 参考 https://github.com/vuejs/babe... :
const A = (props, { slots }) => (
<>
<h1>{ slots.default ? slots.default() : 'foo' }</h1>
<h2>{ slots.bar?.() }</h2>
</>
);
有个 slot/template 写法比较绕, 定制插槽的写法:
<NSelect>
<template #optionEmptyRender>
<div>Demo</div>
</template>
</NSelect>
写成:
<NSelect
v-slots={{
optionEmptyRender: () => {
return (
<div>Demo</div>
);
},
}}
/>
提取组件 props 的类型
对组件进行封装的时候, 会遇到需要获取 Component Props 进行复用的场景,
网上有找到用 TypeScript 泛型来获取组件 props 类型的写法:
https://stackoverflow.com/q/6...
import MyComponent from "./mycomponent.vue";
// 得到这个类型
type MyComponentProps = InstanceType<typeof MyComponent>["$props"];
TODO
题叶
ClojureScript 爱好者.
推荐阅读
Nginx querystring 转写的两个例子
转发请求时需要两个功能, 一个是去掉 querystring 上特定的字段, 一个是替换掉一个字段的值.参考两篇文章得到一个可用的方案,[链接][链接]主要的思路是通过正则, 对 $args 反复进行替换, 得到自己想要的结果, {代...
题叶阅读 552
感受 Vue3 的魔法力量
• setup语法糖<script setup lang="ts">摆脱了书写声明式的代码,用起来很流畅,提升不少效率
京东云开发者赞 4阅读 840
Vele-Admin 一个基于Vue3+Element-Plus的后台管理系统
vele-admin是一个基于 vue3, vite2, element-plus, vuex-module-decorators, vue-router-next, typescript 的后台管理系统
shellingfordly阅读 5.1k评论 1
vue3公司自用项目实战入门(vue3+router4+antdv+pinia实现)
一.为什么学typescriptvar三大框架都是用ts写的,做个类比,如果你不知道阿拉伯数字和加减法,怎么解应用题?同理不会ts如何使用vue开发工作项目?二.开发环境准备1.安装node,[链接],下载安装,一路默认下一步 ,...
彬哥头发多赞 2阅读 831评论 1
Nuxt3实战系列之了解Nuxt3的渲染模式
使用过nuxt2的人都知道,nuxt并不单单是个服务端渲染框架,它也同时具备纯客户端渲染以及静态化渲染的能力。在nuxt3上,这三种渲染模式也得以保留,而且还新增了一种hybird模式,也就是可以按路由分别设置渲染模式。
imwty赞 2阅读 909
Vue第二波ref语法提案来袭 这次会进入到标准吗?
其实之前Vue3做过好多次语法糖的提案,最经典的莫过于<script setup>提案。但一开始这个提案夹杂着ref语法糖,所以很多批评的声音接踵而来:什么Vue又开始创造新概念啦、不忠于JavsScript啦、不如叫<scr...
手撕红黑树阅读 2.9k
Vue如何解决组件兼容Vue2和Vue3?
为何需要解决此类问题,在于公司的项目业务需要,以及前端技术驱动向前推进 ,需要使用Vue3开发新的组件库,需要兼容Vue2的产品(公司现阶段Vue2产品为主)
vipbic赞 2阅读 1.1k
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。