vue3 tsx语法

1,v-model

tsx语法也可以使用v-model语法来绑定变量

 2,事件 @click,@change

tsx语法统一把@符号变成on 事件名称的格式

3,属性,slot,emit位置

vue3组件获取props,slots,emits统一在setup方法中拿到

4, 插槽

tsx语法的组件插槽和传统的vue语法存在很大不同

传统插槽:

 在tsx语法中,插槽要这么写

 5,注意事项

 tsx组件只有一个根节点

tsx变量直接使用大括号,不需要使用v-bind

tsx在大括号中写代码语句,在圆括号中写jsx语法

6,例子: 一个封装的editor组件

1.  
   import { defineComponent, ref } from "vue";
2.  
   import { QuillEditor } from "@vueup/vue-quill";
3.  
   import "@vueup/vue-quill/dist/vue-quill.snow.css";
4.  
   import ImageUploader from "quill-image-uploader";
5.  
   import { upload } from "@/api";
6.  
    
7.  
   export default defineComponent({
8.  
   props: {
9.  
   modelValue: {
10.  
    type: String,
11.  
    default: () => "",
12.  
    },
13.  
    },
14.  
    emits: ["update:modelValue"],
15.  
    setup(props, { emit }) {
16.  
    const content = ref(props.modelValue);
17.  
    const updateContent = (content: any) => {
18.  
    emit("update:modelValue", content);
19.  
    };
20.  
    const modules = {
21.  
    name: "imageUploader",
22.  
    module: ImageUploader,
23.  
    options: {
24.  
    upload: async (file: any) => {
25.  
    const res = await upload(file);
26.  
    return res.data.url;
27.  
    },
28.  
    },
29.  
    };
30.  
    return () => (
31.  
    <QuillEditor
32.  
    toolbar="full"
33.  
    v-model:content={content.value}
34.  
    contentType="html"
35.  
    modules={modules}
36.  
    style="max-height: 300px"
37.  
    onUpdate:content={updateContent}
38.  
    />
39.  
    );
40.  
    },
41.  
    });

这篇好文章是转载于：学新通技术网