vue3 + tsx语法小记

构建vue3 + ts

目录

构建vue3 + ts

支持TS语法

语法

指令

v-if

v-bind

v-for

v-model v-show

事件绑定

组件通信

父向子

子向父传

插槽

---

npm create vite@latest


# npm 6.x
npm create vite@latest my-vue-app --template vue-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue-ts

查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

支持TS语法

1. 安装jsx库

npm i @vitejs/plugin-vue-jsx -D

1. 安装完成之后在vite.config.ts中使用插件

import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vueJsx()]
})

语法

// 注意ref创建的数据不管在什么地方都应该.value 跟原生vue3有区别

// 组件定义

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    // Todo
    return () => (
      

        
Child1
        
Child2
        
Child3
      
    )
  }
})
// 多节点
return () => (
  <>
    
Child1
    
Child2
    
Child3
  
)


// 一种条件语法  但是不是v-if
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    // Todo
    return () => {
      if (something) {
        return (
          

            
Child1
            
Child2
            
Child3
          
        )
      } else {
        return (
          
noChild
        )
      }
    }
  }
})

指令

v-show 正常使用

v-if

{
    isShow.value ? v-if yes : v-else no
}

v-bind

v-for

{
    arr.map(item => {
        return (
            

                {item}
            
        )
    })
}

v-model v-show

v-show

事件绑定

点击1
点击2
 changeDemo(text.value)}>点击3

组件通信

父向子

需要注意的是，prop传递过来的值如果没有默认值，需要判断是否为空，可以使用计算属性或者条件渲染处理。

// 父亲


// Home组件
// 先是props接收定义类型，之后在setup中使用
import {defineComponent,toRefs} from 'vue'

export default defineComponent({
    props: {
        num: Number,
        a:{
          type:String,
          default: ''
        }
    },
    setup(props) {
        console.log(props,88);
        return () => (
            
Home page{props.num}{props.a}
        )
    }
})



// provide  inject是支持的
// 注意  provide  inject必须写在setup下层   不能是下下层

子向父传

// 绑定自定义事件实现
//    父组件  监听消息

function giveHome(val:any) {
  // 应该采用这种方式去处理
    Object.assign(arr,val)
}



// Home组件
// 先接收    在事件中发布
emits: ['giveHome'],
setup(props, {emit}) {
      let arr = reactive([1,2,3,4,5,6])
      onMounted(() => {
          console.log(999);
          
          emit('giveHome',arr)
      })
      return () => (
          <>
              
Home page{props.num}{props.a}
              {
                  arr.map(item => {
                      return (
                          

                              {item}
                          
                      )
                  })
              }
          
      )
  }

插槽

// 父组件中
 
默认插槽
,
        main: () => '具名插槽',
        work: (props:number) => '我才是主要的' + props
    }}
>

//子组件

    默认插槽：{slots.default && slots.default()}
    具名插槽： {slots.main && slots.main()}
    作用域插槽：{slots.work && slots.work(b)}