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 () => (
      <div>
        <div>Child1</div>
        <div>Child2</div>
        <div>Child3</div>
      </div>
    )
  }
})
// 多节点
return () => (
  <>
    <div>Child1</div>
    <div>Child2</div>
    <div>Child3</div>
  </>
)


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

export default defineComponent({
  setup() {
    // Todo
    return () => {
      if (something) {
        return (
          <div>
            <div>Child1</div>
            <div>Child2</div>
            <div>Child3</div>
          </div>
        )
      } else {
        return (
          <div>noChild</div>
        )
      }
    }
  }
})

指令

v-show 正常使用

v-if

{
    isShow.value ? <span>v-if yes</span> : <span>v-else no</span>
}

v-bind

<Home num={num.value} a="1"></Home>  

v-for

{
    arr.map(item => {
        return (
            <div>
                <span>{item}</span>
            </div>
        )
    })
}

v-model v-show

<input type="text" v-model={text.value} />
<div v-show={isShow.value}>v-show</div>

事件绑定

<button onClick={changeShow} data-name={text.value}>点击1</button>
<button onClick={changeDemo.bind(this,text.value)}>点击2</button>
<button onClick={e => changeDemo(text.value)}>点击3</button>

组件通信

父向子

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

// 父亲
<Home num={num.value} a="1"></Home>

// 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 () => (
            <div>Home page{props.num}{props.a}</div>
        )
    }
})



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

子向父传

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

function giveHome(val:any) {
  // 应该采用这种方式去处理
    Object.assign(arr,val)
}
<Home num={num.value} a="1" onGiveHome={giveHome}></Home>


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

插槽

// 父组件中
<Home num={num.value} a="1" onGiveHome={giveHome}
    v-slots={{
        default: () => <h1>默认插槽</h1>,
        main: () => '具名插槽',
        work: (props:number) => '我才是主要的' + props
    }}
></Home>

//子组件
<div>
    默认插槽：{slots.default && slots.default()}
    具名插槽： {slots.main && slots.main()}
    作用域插槽：{slots.work && slots.work(b)}
</div>