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-ifv-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 爱好者.

Calcit 语言作者

17.3k 声望
2.6k 粉丝
0 条评论
推荐阅读
Nginx querystring 转写的两个例子
转发请求时需要两个功能, 一个是去掉 querystring 上特定的字段, 一个是替换掉一个字段的值.参考两篇文章得到一个可用的方案,[链接][链接]主要的思路是通过正则, 对 $args 反复进行替换, 得到自己想要的结果, {代...

题叶阅读 552

感受 Vue3 的魔法力量
• setup语法糖&lt;script setup lang=&quot;ts&quot;&gt;摆脱了书写声明式的代码,用起来很流畅,提升不少效率

京东云开发者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模式,也就是可以按路由分别设置渲染模式。

imwty2阅读 909

Vue第二波ref语法提案来袭 这次会进入到标准吗?
其实之前Vue3做过好多次语法糖的提案,最经典的莫过于&lt;script setup&gt;提案。但一开始这个提案夹杂着ref语法糖,所以很多批评的声音接踵而来:什么Vue又开始创造新概念啦、不忠于JavsScript啦、不如叫&lt;scr...

手撕红黑树阅读 2.9k

封面图
Vue如何解决组件兼容Vue2和Vue3?
为何需要解决此类问题,在于公司的项目业务需要,以及前端技术驱动向前推进 ,需要使用Vue3开发新的组件库,需要兼容Vue2的产品(公司现阶段Vue2产品为主)

vipbic2阅读 1.1k

封面图

Calcit 语言作者

17.3k 声望
2.6k 粉丝
宣传栏