vue3中tsx的基本语法使用

注意：如需在vue3中配置tsx的环境，请点击这里
注意：以下的教程均会以第三种写法来写

事件及修饰符的使用

经测试，capture、once 和 passive三个事件修饰符必须使用链接模式，使用withModifiers不生效（后续vue版本更新后有可能可以，目前这里是暂时不行，当前教程vue版本：3.2.37）

import { defineComponent, ref, withModifiers } from "vue";
export default defineComponent({setup(){const num = ref<number>(0);const addNum = () => {num.value += 1;}return () => (<div><div>{num.value}</div>// 基本事件<button onClick={addNum}>加1</button>// once事件修饰符，但ts可能会报警告<button onClickOnce={addNum}>我只会触发一次</button>// once事件修饰符与capture事件修饰符链式使用<button onClickOnceCapture>多个事件修饰符</button>// 阻止事件传递及按键ctrl才能触发<button onClick={withModifiers(addNum, ['stop', 'ctrl'])}>withModifiers的使用</button></div>);}
})

v-model的使用

语法：v-model={[‘传递的数据’, ‘如果不设置我，默认是modelValue’, [‘修饰符，可多个’]]}

//父组件
import { defineComponent, ref } from "vue";
import ChildCom from '@/components/child/index';
export default defineComponent({setup(){const num = ref<number>(0);const addNum = () => {num.value += 1;}return () => (<div><div>我是tsx{num.value}</div><button onClick={addNum}>父组件加1</button><ChildCom v-model={[num.value, 'num']} /></div>);}
});
//子组件
import { defineComponent } from "vue";
export default defineComponent({props: {num: {type: Number,default: 0}},emits: ['update:num'],setup(props, { emit }){const addNum = () => {emit('update:num', props.num + 1);}return () => (<div><div>{props.num}</div><button onClick={addNum}>子组件加1</button></div>);}
})

插槽的使用

1.匿名插槽

// 父组件
import { defineComponent } from "vue";
import ChildCom from '@/components/child/index';
export default defineComponent({setup(){return () => (<div><ChildCom>匿名插槽的使用</ChildCom>  // 匿名插槽的话我个人喜欢这种// 或者<ChildCom>{() => '匿名插槽的使用'}</ChildCom>        </div>);}
})
// 子组件
import { defineComponent } from "vue";
export default defineComponent({setup(props, { slots }){return () => (<><div>{ slots.default ? slots.default() : '' }</div></>);}
})

2.具名插槽

// 父组件
import { defineComponent } from "vue";
import ChildCom from '@/components/child/index';
export default defineComponent({setup(){return () => (<div><ChildCom>{{default: () => <h5>默认插槽</h5>,aaa: () => <h4>具名插槽</h4>}}</ChildCom></div>);}
})

3.插槽传值

// 父组件
import { defineComponent } from "vue";
import ChildCom from '@/components/child/index';
export default defineComponent({setup(){return () => (<div><ChildCom>{{default: () => <h5>默认插槽</h5>,aaa: ({num}: {num: number}) => <h4>具名插槽值为：{num}</h4>}}</ChildCom></div>);}
})
// 子组件
import { defineComponent, ref } from "vue";
export default defineComponent({setup(props, { slots }){const num = ref<number>(0);const addNum = () => {num.value++;}return () => (<><div>{ slots.default ? slots.default() : '' }</div><div>{ slots.aaa ? slots.aaa({num: num.value}) : '' }</div><button onClick={addNum}>点我改变插槽名为aaa的值</button></>);}
})

自定义指令的使用

实现一个指令，使文本框自动获得焦点，如果传递了延迟时间，则延迟指定时间后获得焦点

// main.ts
import { createApp, Directive } from 'vue'
import App from './App'const inputFocus: Directive<HTMLInputElement> = {mounted(el, binding){const value = isNaN(binding.value) ? 0 : binding.valueconsole.log(binding.modifiers) // 修饰符const arg = typeof binding.arg === 'boolean' ? binding.arg : false // 如果传递了arg参数，且为true，则五秒后获得焦点if(arg){setTimeout(() => {el.focus && el.focus();}, 5000);return}setTimeout(() => {el.focus && el.focus();}, value);}
}
const app = createApp(App)
app.directive('inputFocus', inputFocus);
app.mount('#app')// App.tsx
import { defineComponent, ref } from "vue";
export default defineComponent({setup(){const bol = ref(true)return () => (<div><div>默认情况：<input v-inputFocus /></div><div>延迟2s：<input v-inputFocus={2000} /></div><div>arg参数情况：<input v-inputFocus={[2000, bol.value]} /></div>// 语法格式为 v-xxx={[value, arg, ['modifiers1', 'modifiers2', ...]]}</div>);}
})

vue3中tsx的基本语法使用相关推荐

Vue3中TSX和h函数的用法
Vue3中TSX的用法补充:(jsx用法)[https://github.com/vuejs/babel-plugin-jsx] (vue3中渲染函数&JSX)[https://cn.vue ...
vue3中的$refs的使用
Vue3中$refs的使用一.简介有时候想访问$refs绑定的组件的属性或者方法,我们会使用$refs.但是Vue3不同于Vue2,在 Vue3的setup中我们是无法访问到this的,所以我们需 ...
vue3中使用tsx
前言相信 react 的伙伴对于 jsx/tsx 都不陌生吧,现在在 vue3 中也可以使用 jsx/tsx 语法拉. 安装插件(@vitejs/plugin-vue-jsx) vite官方提供了官 ...
在vue3中使用jsx语法
背景 vue3项目中推进使用composition-api + setup 形式配合jsx+hooks形式,按业务分离,逻辑更清晰,维护更方便: 语法下面主要通过对比jsx和template不同 ...
VUE3/TS/TSX入门手册指北
VUE3入门手册 vue3入门首先查看官方文档:https://cn.vuejs.org/guide/quick-start.html 如果有vue2基础,速成课程:https://www.zh ...
vue3的tsx写法(v-show、v-if、v-for、v-bind、v-on)，父子组件传值
1.如下就是vue3的tsx写法,tsx写法中支持使用v-show,如下: import {ref} from 'vue'let appData = ref<string>(''); le ...
中input怎么接受后台传值_[vue3]如何在vue3中优雅地使用vmodel？
Vue中的数据绑定绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-bind eg:v-bind:class ...
【Vue3】vue3中组合式Api的setup写法快速入门上手起步
要使用Vue3,那必须得会setup,因为setup是组合式API表演的舞台. 安装volar 如果你的VScode之前安装有vuter插件,请先把他禁用或者卸载掉,然后安装volar. 因为,vut ...
vue2、vue3中自定义v-model的使用和区别
在我们的日常开发中,时常需要写一些自定义组件,而其中可能就会使用到v-model,v-model是Vue中的一个指令,用来实现数据的双向绑定,实现数据.视图更新,v-model是一个语法糖,,我们可以 ...
VUE3中使用pinia
Vue3中使用pinia 安装依赖 yarn add pinia //下面这个取决你需不需要数据持久化安装 yarn add pinia-plugin-persist 挂载 import {creat ...

vue3中tsx的基本语法使用

事件及修饰符的使用

v-model的使用

插槽的使用

1.匿名插槽

2.具名插槽

3.插槽传值

自定义指令的使用

vue3中tsx的基本语法使用相关推荐

最新文章

热门文章