{"id":712,"date":"2023-05-14T17:09:53","date_gmt":"2023-05-14T09:09:53","guid":{"rendered":"http:\/\/gjweb.top\/?p=712"},"modified":"2023-05-14T17:09:53","modified_gmt":"2023-05-14T09:09:53","slug":"10-vue%e4%b8%ad%e4%bd%bf%e7%94%a8-tsx-%e8%af%ad%e6%b3%95","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=712","title":{"rendered":"10. Vue\u4e2d\u4f7f\u7528 tsx \u8bed\u6cd5"},"content":{"rendered":"\n

\u4f7f\u7528<\/h2>\n\n\n\n

\u5b89\u88c5<\/p>\n\n\n\n

yarn add @vitejs\/plugin-vue-jsx<\/code><\/pre>\n\n\n\n
\u914d\u7f6e vite.config.ts<\/p>\n\n\n\n
import { defineConfig } from 'vite'
import vue from '@vitejs\/plugin-vue'
import vueJsx from '@vitejs\/plugin-vue-jsx'
\/\/ https:\/\/vitejs.dev\/config\/
export default defineConfig({
  plugins: [vue(),vueJsx()],
})<\/code><\/pre>\n\n\n\n
\u4f7f\u7528 tsx \u7ec4\u4ef6<\/p>\n\n\n\n
<template>
  <ComC><\/ComC>
<\/template>
<script setup lang=\"ts\">
import ComC from \".\/components\/comC.tsx\"
<\/script><\/code><\/pre>\n\n\n\n
\n\n\n\n
tsx \u5199\u6cd5<\/h2>\n\n\n\n
\u521b\u5efa comC.tsx \u7ec4\u4ef6<\/p>\n\n\n\n
\u51fd\u6570\u5f0f\u5199\u6cd5<\/h3>\n\n\n\n
export default function(){
  return (<div>this is tsx Component<\/div>)
}<\/code><\/pre>\n\n\n\n
option\u65b9\u5f0f<\/h3>\n\n\n\n
import { defineComponent } from \"vue\";
export default defineComponent({
  data(){
    return {
      name:\"tsx option\"
    }
  },
  render(){
    return (<div>{this.name}<\/div>)
  }
})<\/code><\/pre>\n\n\n\n
setup\u65b9\u5f0f<\/h3>\n\n\n\n
import { defineComponent } from \"vue\";
export default defineComponent({
  setup(){
    return ()=>(<div>this setup<\/div>)
  }
})<\/code><\/pre>\n\n\n\n
\n\n\n\n
setup\u6307\u4ee4\u6ce8\u610f\u4e8b\u9879<\/h2>\n\n\n\n
  • \u4f7f\u7528\u5355\u82b1\u62ec\u53f7\u4ee3\u66ff\u53cc\u82b1\u62ec\u53f7<\/li>
  • \u4e0d\u4f1a\u81ea\u52a8\u89e3\u5305 {xxx.value}<\/li>
  • \u4e0d\u652f\u6301 v-if \u6307\u4ee4, \u4f7f\u7528\u4e09\u76ee\u8fd0\u7b97\u7b26\u66ff\u4ee3<\/li>
  • \u4f7f\u7528 map \u66ff\u4ee3 v-for , \u7528\u6cd5\u540c react \u76f8\u4f3c<\/li>
  • \u4f7f\u7528\u5355\u82b1\u62ec\u53f7\u66ff\u4ee3 v-bind, \u7528\u6cd5\u540c react<\/li>
  • \u4f7f\u7528 props \/ emit \u63a5\u6536\u4f20\u503c<\/li><\/ul>\n\n\n\n
    props<\/p>\n\n\n\n
    type Props = {
      title:string
    }
    export default function (props:Props){
      console.log(props.title);
      return (<div>{props.title}<\/div>)
    }<\/code><\/pre>\n\n\n\n
    emit<\/p>\n\n\n\n
    export default function (props,ctx:any){
      const handleClick = (ctx:any)=>{
        ctx.emit(\"on-click\",\"\u4f20\u503c\")
      }
      return (
        <div>
          <button onClick={()=>handleClick(ctx)}>click<\/button>
        <\/div>
      )
    }<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    \u4f7f\u7528 \u5b89\u88c5 \u914d\u7f6e vite.config.ts \u4f7f\u7528 tsx \u7ec4\u4ef6 tsx \u5199\u6cd5 \u521b\u5efa comC.tsx \u7ec4\u4ef6 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[64],"tags":[],"class_list":["post-712","post","type-post","status-publish","format-standard","hentry","category-vue3"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=712"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/712\/revisions"}],"predecessor-version":[{"id":713,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/712\/revisions\/713"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}