vue中.vue、tsx、jsx

前言

vue 开发中避免不了各种各样的需求，平时大多数人都是使用 .vue 文件编写我们的组件(有点像小程序)，但也可以使用 tsx、jsx 模式开发，后面的模式不是说专门 react 开发者准备的，虽然有点那个意思，但是更主要的是吸收了 react 组件的灵活性，遇到复杂场景，真的是方便至极了

下面就介绍一下 .vue 文件的基础使用，以及 tsx、js 的页面开发、组价开发案例，下次碰到就知道怎么用了

.vue

用 vue 写一个页面，跟小程序一样，模版 xml 和 js 分离编写，模版可以直接使用 reactive、ref 等提供的数据，也可以回调点击事件

<template>
  <div class="w-full flex flex-col">
    <div class="w-full">{{ data.title }}</div>
    <div class="w-full">{{ data.content }}</div>
    <div class="w-full">数量{{ data.count }}</div>
    <div class="cursor-pointer select-none" @click="addCount">点击增加数量</div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const data = reactive({
  title: '我是设置页面二',
  content: '一个点击增加案例',
  count: 0,
})

const addCount = () => {
  data.count++
}
</script>

<style scoped></style>

.tsx、.jsx

tsx、jsx 一样，都是 xml 化的 ts、js 文件，也就是编写 ui(dom) 的页面，在 react 中比较常见，使用非常灵活，尤其是略复杂的场景，比 vue 模式的基础使用要好的多的多

vue项目中使用 tsx、jsx 需要使用提供的的 defineComponent 方法，并且在 setup 中 编写我们的代码，结果返回一个返回带模板组件的函数

默认是下面的结构

export default defineComponent({
  setup() {
      //return 的是一个函数，只不过函数中编写我们的 ui 相关内容罢了
      return () => <component /> 
  }
}

setup 函数中开发组件，就跟 react 中的函数式组件开发逻辑类似，不说一模一样，也大差不多，只不过用的不是 hook 那套，而是 vue 的响应式那套

下面写一个计时器

export default defineComponent({
  setup() {
    const data = reactive({
      title: '我是设置页面三',
      content: '一个点击增加案例',
      count: 0,
    })

    const addCount = () => {
      data.count++
    }

    return () => (
      <div class="w-full flex flex-col">
        <div class="w-full">{data.title}</div>
        <div class="w-full">{data.content}</div>
        <div class="w-full">数量{data.count}</div>
        <div class="cursor-pointer select-none" onClick={addCount}>
          点击增加数量
        </div>
      </div>
    )
  },
})

tsx、jsx 通用组件模式

写过 vue 的也知道，通用组件和页面组件不一样，需要传递 props、emit 等交互，因此 Setup 中也提供的对应的参数，可以直接取出直接使用，非常方便，还支持添加 name，方便调试时识别我们的组件

export default defineComponent({
  name: 'Modal',
  props: {
    title: String,
    isShow: Boolean, //组件传递属性的
  },
  emits: ['close'], //组件相应事件的
  setup(props, { emit, slots }) {
    //props 接受外部参数 emit用于响应事件到外部 
    //slots插入节点(有多种slot节点，一般slots.default()足够了)
    const close = () => {
      emit('close')
    }

    return () => (
      <div class="w-full flex flex-col">
        <div class="w-full">{props.title || '我是默认标题啊'}</div>
        {slots.default && slots.default()}
        <div class="cursor-pointer" onClick={close}>
          点击我退出
        </div>
      </div>
    )
  },
})

最后

由于逻辑比较简单，一看就会，就不多说了，用到的都说好🤣