以 JSX 的方式来编写 Vue3 代码

标签：数据   接口   head   提示   com   outer   安装   lin   rop   

创建项目

1. 使用 vue ui 创建 vue3 项目

2. 安装 vue-router vuex @vue/cli-plugin-typescript, @vue/babel-plugin-jsx

3. 修改 babel.config.js 文件

module.exports = {
    presets: [
        ‘@vue/cli-plugin-babel/preset‘
    ],
    plugins: ["@vue/babel-plugin-jsx"]
}

3. 修改全部 .vue -> .jsx, 模板如下

import {defineComponent} from ‘vue‘;

export default defineComponent({
    name: "",
    setup() {
        return () => (
            

            >
        )
    }
})

路由

RouterView

和 是一样的用法

import {defineComponent} from ‘vue‘;
import {RouterView} from ‘vue-router‘

export default defineComponent({
    setup() {
        return () => 
    }
})

RouterLink

import {defineComponent} from ‘vue‘;
import {RouterLink} from ‘vue-router‘

export default defineComponent({
    name: "RouterLinkDemo",
    setup() {
        return () => 
    }
})

Fragment

一个组件返回多个元素,和 React.Fragment 差不多
短语法 >

import {defineComponent, Fragment} from ‘vue‘;

export default defineComponent({
    name: "FragmentDemo",
    setup() {
        const a = (
            
                
A
                
A
            >
        )
        return () => (
            
                {a}
                
b
            
        )
    }
})

插槽

带有插槽的组件

创建 ASlotDemo 组件,ASlotDemo 有具名插槽 header,范围插槽 footer

在模板中定义插槽需要用到 , jsx 中使用renderSlot函数渲染插槽

renderSlot 接收 Slots, 插槽名,插槽数据,进行渲染

import {defineComponent, renderSlot} from "vue";

export default defineComponent({
    name: "ASlotDemo",
    setup(props, {slots}) {
        const {default: defaultSlot, header, footer} = slots;
        const footerData = {
            text: "2020-1-20"
        }
        return () => (
            
                

                    {
                        header !== undefined ? renderSlot(slots, ‘header‘) : "默认 header"
                    }
                
                

                    {
                        defaultSlot !== undefined ? renderSlot(slots, ‘default‘) : "没有传递默认插槽"
                    }
                
                

                    {
                        footer !== undefined ? renderSlot(slots, ‘footer‘, footerData) : "默认 footer" + footerData.text
                    }
                
            >
        )
    }
})

使用

在使用范围插槽时,可以定义个接口,获得语法提示

import {defineComponent} from "vue";
import ASlotDemo from "@/components/slot/ASlotDemo";

interface IFooterSlotData {
    text: string;
}

export default defineComponent({
    name: "BSlotDemo",
    setup() {
        return () => (
            
                
                    我是: BSlotDemo
                
                
                

                 
slots使用方式1
,
                    header: () => header1,
                }}/>
                
                
                    {{
                        default: () => 
slots使用方式2
,
                        header: () => header2,
                    }}
                

                 
范围插槽使用
,
                    header: () => 范围插槽header,
                    footer: (value: IFooterSlotData) => 获取范围插槽的值: {value.text},
                }}/>
            >
        )
    }
})

emits

在父组件使用时,必须 on + 事件名(事件名第一个字母必须大写)

// AEmitsDemo.jsx
import {defineComponent} from ‘vue‘;

export default defineComponent({
    name: "AEmitsDemo",
    emits: [‘click‘, ‘getDate‘],
    setup(props, {emit}) {
        const click = () => {
            console.log(‘点击++++++++‘)
            emit("click")
        }
        return () => (
            
                
点击
                
 emit("getDate", 10)}>获取数据
            >
        )
    }
})

// BEmitsDemo.jsx
import {defineComponent} from ‘vue‘;
import AEmitsDemo from "@/components/emits/AEmitsDemo";

export default defineComponent({
    name: "BEmitsDemo",
    setup() {
        const click = () => {
            console.log(‘点击---------‘)
        }
        const getData = (value: number) => {
            console.log(value);
        }
        return () => 
    }
})

源码: https://github.com/NikolasSky/vue3-tsx

以 JSX 的方式来编写 Vue3 代码

标签：数据   接口   head   提示   com   outer   安装   lin   rop   

原文地址：https://www.cnblogs.com/plum-nikolas/p/14344782.html