vue3+jsx入门必看（一）

前言

公司新项目使用了jsx,简单整理了下自己在开始做项目时想要知道的内容，后期会再做补充。vue版本^3.2.37

基础模板

const vnode = <div>hello</div>

动态值

const vnode = <div id={dynamicId}>hello, {userName}</div>

v-if

<div>{ok.value ? <div>yes</div> : <span>no</span>}</div>

v-for

<ul>
 {items.value.map(({ id, text }) => {
   return <li key={id}>{text}</li>
 })}
</ul>

v-on

以 on 开头，并跟着大写字母的 props 会被当作事件监听器。比如，onClick 与模板中的 @click 等价。

<button
 onClick={(event) => {
   /* ... */
 }}
>
 click me
</button>

v-model

//官网看到的是要监听Update事件
 <input 
 	value={inputVal.value}
 	onUpdate:current={(val) => {inputVal.value = val}}
 />
 //不过直接用指令语法糖还是可以正常使用的
 <input 
 	v-model:value={inputVal.value} 
 	onPressEnter={handleClick} 
 />

事件修饰符

对于 .passive、.capture 和 .once 事件修饰符，可以使用驼峰写法将他们拼接在事件名后面：

<input
 onClickCapture={() => {}}
 onKeyupOnce={() => {}}
 onMouseoverOnceCapture={() => {}}
/>

组件

使用jsx模板定义的组件被其他模块引入，可以直接使用无需注册组件，在给组件创建 vnode 时，传递给渲染函数的第一个参数应当是组件的定义。

import Foo from './Foo.vue'
import Bar from './Bar.jsx'
function render() {
 return (
   <div>
     <Foo />
     <Bar />
   </div>
 )
}

渲染插槽

// 默认插槽
<MyComponent>{() => 'hello'}</MyComponent>

// 具名插槽
<MyComponent>{{
default: () => 'default slot',
foo: () => <div>foo</div>,
bar: () => [<span>one</span>, <span>two</span>]
}}</MyComponent>

总结

文章当前内容参考网站：https://cn.vuejs.org/guide/extras/render-function.html