/vue-antd-jsx

vue3 + ant-design-vue2

Primary LanguageJavaScript

vue-antd-jsx

vue3 + ant-design-vue2 jsx简单解决方案

安装

yarn install

介绍

image image

由jsx代替vue文件，关于jsx语法的基本用法在页面中都有

对函数式组件更加友好

具体都可以在vuejs/jsx-next中找到

用法变动

双向绑定v-model

<input vModel={value}>   //推荐
<input v-model={value}>  
<input modelValue={value} onInput={(e)=>{value=e.target.value}}>

自定义指令

directives: { autoshow:  mounted() {
    ...
}}

<div vAutoshow={value}>{message.value}</div>

插槽

const slots = {
    red: () => <p>red slot</p>,
    green: () => <p>green slot：green</p>,
    default: () => <p>default slot：default</p>
}

<Custom vSlots={slots}></Custom>

//or

const slots = {
    red: () => <p>red slot</p>,
    green: () => <p>green slot：green</p>
}

<Custom vSlots={slots}>
    <p>default slot：default</p>
</Custom>