AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue3 + setup + TypeScript: 构建现代、类型安全的Vue应用的关键技巧总结

2024-02-02 139
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 当使用 setup 的时候，组件直接引入就可以了，不需要再自己手动注册

1. 组件引入


当使用 setup 的时候，组件直接引入就可以了，不需要再自己手动注册


<template>
  <Child />
</template>
<script setup lang="ts">
import Child from "./Child.vue";
</script>


2. ref 和 reactive


ref 一般用于基本的数据类型，比如 string，boolean ,reactive 一般用于对象 ref 的地方其实也是调用的 reactive 实现的。


<template>
  <h1>{{ title }}</h1>
  <div>
    {{ data }}
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const title = ref("title");
const data = reactive({
  userName: "xiaoming",
  age: 18,
});
</script>


3. defineEmits 和 defineProps 获取父组件传过来值和事件


// 第一种不带默认值props
const props = defineProps<{
  foo: string
  bar?: number
}>()
// 第二种带默认值props
export interface ChildProps {
  foo: string
  bar?: number
}
const props = withDefaults(defineProps<ChildProps>(), {
   foo: "1qsd"
  bar?: 3
})
// 第一种获取事件
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
// 第二种获取事件
const emit = defineEmits(["dosth"])


4. 使用 useAttrs 和 useSlots


useAttrs 可以获取父组件传过来的 id 、class 等值。useSlots 可以获得插槽的内容。例子中，我们使用 useAttrs 获取父组件传过来的 id 、class、useSlots 获取插槽的内容。


父组件：


<template>
  <div class="father">{{ fatherRef }}</div>
  <Child :fatherRef="fatherRef" @changeVal="changeVal" class="btn" id="111">
    <template #test1>
      <div>1223</div>
    </template>
  </Child>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Child from "./Child.vue";
const fatherRef = ref("1");
function changeVal(val: string) {
  fatherRef.value = val;
}
</script>
<style lang="scss" scoped>
.father {
  margin-top: 40px;
  margin-bottom: 40px;
}
.btn {
  font-size: 20px;
  color: red;
}
</style>


子组件：


<template>
  <!-- <div class="child">{{ props.fatherRef }}</div> -->
  <div v-bind="attrs">
    <slot name="test1">11</slot>
    <input type="text" v-model="inputVal" />
  </div>
</template>
<script setup lang="ts">
import { computed, useAttrs, useSlots } from "vue";
const props = defineProps<{
  fatherRef: string;
}>();
const emits = defineEmits(["changeVal"]);
const slots = useSlots();
const attrs = useAttrs();
console.log(122, attrs, slots);
const inputVal = computed({
  get() {
    return props.fatherRef;
  },
  set(val: string) {
    emits("changeVal", val);
  },
});
</script>



使用自定义指令

在 setup 里边自定义指令的时候，只需要遵循vNameOfDirective  这样的命名规范就可以了


比如如下自定义 focus 指令，命名就是 vMyFocus，使用的就是 v-my-focus


自定义指令


<script setup lang="ts">
const vMyFocus = {
  onMounted: (el: HTMLInputElement) => {
    el.focus();
    // 在元素上做些操作
  },
};
</script>
<template>
  <input v-my-focus value="111" />
</template>


5. 使用 defineExpose 子组件传父组件


子组件


<template>
  <div class="child"></div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
function doSth() {
  console.log(333);
}
defineExpose({ doSth });
</script>


父组件


<template>
  <div class="father" @click="doSth1">222</div>
  <Child ref="childRef"></Child>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import Child from "./Child.vue";
const childRef = ref();
function doSth1() {
  childRef.value.doSth();
}
</script>


6. 父组件传子组件


父组件


<template>
  <div class="father"></div>
  <Child @doSth="doSth"></Child>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import Child from "./Child.vue";
function doSth() {
  console.log(112);
}
</script>


子组件


<template>
  <div class="child">2222</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
const emits = defineEmits(["doSth"]);
onMounted(() => {
  emits("doSth");
});
</script>


7. toRefs


当从父组件向子组件传 props 的时候，必须使用 toRefs 或者 toRef 进行转一下，这是为什么呢？


这里是因为如果不使用 toRefs 转一次的话，当父组件中的 props 改变的时候，子组件如果使用了 Es6 的解析，会失去响应性。


可以看下如下例子


父组件


<template>
  <div class="father" @click="changeVal">{{ fatherRef }}</div>
  <Child :fatherRef="fatherRef"></Child>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import Child from "./Child.vue";
const fatherRef = ref(1);
function changeVal() {
  fatherRef.value = 2;
}
</script>
<style lang="scss" scoped>
.father {
  margin-bottom: 40px;
}
</style>



子组件


<template>
  <div class="child" @click="changeVal">{{ fatherRef }}</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, toRefs } from "vue";
const props = defineProps<{
  fatherRef: any;
}>();
const { fatherRef } = props;
function changeVal() {
  fatherRef.value = 34;
}
</script>


可以看到当父组件如果点击之后，因为使用 const { fatherRef } = props;进行解析，就失去了响应性


所以当父组件变成 2 的时候，子组件还是 1。


这里有两种解决办法


使用 const { fatherRef } = toRefs(props);


在模版中中使用 props.fatherRef


8. 子组件使用 v-model


8.1 可以在子组件中使用 computed，实现双向绑定

父组件


<template>
  <div class="father">{{ fatherRef }}</div>
  <Child :fatherRef="fatherRef" @changeVal="changeVal"></Child>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Child from "./Child.vue";
const fatherRef = ref("1");
function changeVal(val: string) {
  fatherRef.value = val;
}
</script>
<style lang="scss" scoped>
.father {
  margin-top: 40px;
  margin-bottom: 40px;
}
</style>



子组件


<template>
  <!-- <div class="child">{{ props.fatherRef }}</div> -->
  <input type="text" v-model="inputVal" />
</template>
<script setup lang="ts">
import { computed } from "vue";
const props = defineProps<{
  fatherRef: string;
}>();
const emits = defineEmits(["changeVal"]);
const inputVal = computed({
  get() {
    return props.fatherRef;
  },
  set(val: string) {
    emits("changeVal", val);
  },
});
</script>



8.2 可以从父组件传递值和改变值的方法，然后子组件也可以使用 v-model


例子中父组件传递 modelValue 和 update:modelValue 方法 父组件：


<template>
  <Child :modelValue="searchText" @update:modelValue="changeVal"> </Child>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Child from "./Child.vue";
const searchText = ref(1);
function changeVal(val: number) {
  searchText.value = val;
}
</script>
<style lang="scss" scoped>
.father {
  margin-top: 40px;
  margin-bottom: 40px;
}
.btn {
  font-size: 20px;
  color: red;
}
</style>


子组件：


<template>
  <!-- <div class="child">{{ props.fatherRef }}</div> -->
  <!-- <div v-bind="attrs">
        <slot name="test1">11</slot>
        <input type="text" v-model="inputVal" />
    </div> -->
  <input v-model="modelValue" />
</template>
<script setup lang="ts">
import { computed, useAttrs, useSlots } from "vue";
const props = defineProps<{
  modelValue: number;
}>();
// const emits = defineEmits(["changeVal"]);
</script>


9. 递归组件


组件本身是可以调用组件自身的，也就是递归。vue3 中使用文件名称自动注册为组件的名称，比如名为  Child.vue  的组件可以在其模板中用  <Child/>  引用它自己。这里需要注意的是需要设置条件语句，用来中断递归，不然递归会无限递归下去。


父组件


<template>
  <Child :modelValue="searchText" @update:modelValue="changeVal"> </Child>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Child from "./Child.vue";
const searchText = ref(1);
function changeVal(val: number) {
  searchText.value = val;
}
</script>
<style lang="scss" scoped>
.father {
  margin-top: 40px;
  margin-bottom: 40px;
}
.btn {
  font-size: 20px;
  color: red;
}
</style>



子组件


<template>
  <input v-model="modelValue" />
  <Child
    :modelValue="test"
    @update:modelValue="changeTest"
    v-if="modelValue > 2"
  ></Child>
</template>
<script setup lang="ts">
import { computed, useAttrs, useSlots, ref } from "vue";
const props = defineProps<{
  modelValue: number;
}>();
const test = ref(0);
function changeTest(val: number) {
  test.value = val;
}
// const emits = defineEmits(["changeVal"]);
</script>
<style lang="scss" scoped>
.child {
  position: relative;
}
</style>


10. vue3 ts 获取组件 ref 实例


通过ref直接拿到dom引用


<template>
    <div class="demo1-container">
        <div ref="sectionRef" class="ref-section"></div>
    </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
const sectionRef = ref()
</script>


通过对div元素添加了ref属性，为了获取到这个元素，我们声明了一个与ref属性名称相同的变量sectionRef，然后我们通过 sectionRef.value 的形式即可获取该div元素


通过父容器的ref遍历拿到dom引用


<template>
    <div class="demo2-container">
        <div ref="listRef" class="list-section">
            <div @click="higherAction(index)" class="list-item" v-for="(item, index) in state.list" :key="index">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const listRef = ref()
</script>


通过对父元素添加了ref属性，并声明了一个与ref属性名称相同的变量listRef，此时通过listRef.value会获得包含子元素的dom对象 此时可以通过listRef.value.children[index]的形式获取子元素dom


通过:ref将dom引用放到数组中


<template>
  <div class="demo2-container">
      <div class="list-section">
          <div :ref="setRefAction" @click="higherAction(index)" class="list-item" v-for="(item, index) in state.list" :key="index">
              <span>{{item}}</span>
          </div>
      </div>
  </div>
  </template>
  <script setup lang="ts">
  import { reactive } from 'vue'
  const state = reactive({
      list: [1, 2, 3, 4, 5, 6, 7],
      refList: [] as Array<any>
  })
  const setRefAction = (el: any) => {
      state.refList.push(el);
  }
  </script>



通过:ref循环调用setRefAction方法，该方法会默认接收一个el参数，这个参数就是我们需要获取的div元素 此时可以通过state.refList[index]的形式获取子元素dom


通过子组件emit传递ref


<template>
    <div ref="cellRef" @click="cellAction" class="cell-item">
        <span>{{item}}</span>
    </div>
</template>
<script setup lang="ts">
import {ref} from 'vue';
const props = defineProps({
    item: Number
})
const emit = defineEmits(['cellTap']);
const cellRef = ref();
const cellAction = () => {
    emit('cellTap', cellRef.value);
}
</script>



通过对子组件添加了ref属性，并声明了一个与ref属性名称相同的变量cellRef，此时可以通过emit将cellRef.value作为一个dom引用传递出去


tsx 等 render 组件中获取的方式更简单


import { defineComponent, ref, onMounted } from "@vue/runtime-core";
import { ElForm } from "element-plus";
export default defineComponent({
  setup() {
    const $form = ref<InstanceType<typeof ElForm>>(null);
    onMounted(() => {
      $form.value?.validate; // 类型正确
    });
    return () => <ElForm ref={$form}></ElForm>;
  },
});


需要注意的是，如果使用 expose 暴露方法出去，无法获取到对应的类型，您需要自定义类型 github.com/vuejs/rfcs/…[1]


// 组件 MyForm
import { defineComponent, ref, onMounted } from "@vue/runtime-core";
import { ElForm } from "element-plus";
type ELEForm = InstanceType<typeof ElForm>;
// 在外界通过 ref 获取组件实例 请使用这个类型
export interface MyFormExpose {
  validate: ELEForm["validate"];
}
export default defineComponent({
  name: "MyForm",
  setup(props, { expose }) {
    const $form = ref<InstanceType<typeof ElForm>>(null);
    expose({
      validate: (callback) => $form.value?.validate(callback),
    } as MyFormExpose);
    return () => <ElForm ref={$form}></ElForm>;
  },
});
<!-- Home.vue -->
<template>
  <MyForm :ref="$form" />
</template>
<script>
import { defineComponent, ref, onMounted } from '@vue/runtime-core'
import MyForm, { MyFormExpose } from '@/components/MyForm'
export default defineComponent({
  components: { MyForm }
  setup(){
    const $form = ref<InstanceType<typeof MyForm> & MyFormExpose>(null)
    onMounted(() => {
       $form.value?.validate // 类型正确
    })
  }
})
</script>



文章标签：
JavaScript
安全
容器
关键词：
TypeScript类型
TypeScript应用
TypeScript vue3
vue3 TypeScript vue
TypeScript vue
会敲代码的_TT
目录
相关文章
蓝易云
|
5天前
|
JavaScript 安全 前端开发
TypeScript类型声明：基础与进阶
通过本文的介绍，我们详细探讨了TypeScript的基础与进阶类型声明。从基本数据类型到复杂的泛型和高级类型，TypeScript提供了丰富的工具来确保代码的类型安全和可维护性。掌握这些类型声明能够帮助开发者编写更加健壮和高效的代码，提高开发效率和代码质量。希望本文能为您在使用TypeScript时提供实用的参考和指导。
蓝易云
13 2
大树营养快线
|
18天前
|
JavaScript 开发者
在 Babel 插件中使用 TypeScript 类型
【10月更文挑战第23天】可以在 Babel 插件中更有效地使用 TypeScript 类型，提高插件的开发效率和质量，减少潜在的类型错误。同时，也有助于提升代码的可理解性和可维护性，使插件的功能更易于扩展和升级。
大树营养快线
44 8
游客62mqllx53nctc
|
30天前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程！再也不用看臭又长的TypeScript文档了！
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程！再也不用看臭又长的TypeScript文档了！
游客62mqllx53nctc
37 4
游客62mqllx53nctc
|
1月前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程！再也不用看臭又长的TypeScript文档了！
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程！再也不用看臭又长的TypeScript文档了！
游客62mqllx53nctc
36 4
土木林森
|
17天前
|
JavaScript 前端开发 安全
TypeScript进阶：类型系统与高级类型的应用
【10月更文挑战第25天】TypeScript作为JavaScript的超集，其类型系统是其核心特性之一。本文通过代码示例介绍了TypeScript的基本数据类型、联合类型、交叉类型、泛型和条件类型等高级类型的应用。这些特性不仅提高了代码的可读性和可维护性，还帮助开发者构建更健壮的应用程序。
土木林森
22 0
六卿
|
2月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义，可以为现有类型起一个新的名字，使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
六卿
40 1
typeScript进阶(9)_type类型别名
六卿
|
2月前
|
JavaScript
typeScript基础(2)_any任意值类型和类型推论
本文介绍了TypeScript中的`any`任意值类型，它可以赋值为其他任何类型。同时，文章还解释了TypeScript中的类型推论机制，即在没有明确指定类型时，TypeScript如何根据变量的初始赋值来推断其类型。如果变量初始化时未指定类型，将被推断为`any`类型，从而允许赋予任何类型的值。
六卿
56 4
G0518
|
1月前
|
JavaScript 前端开发 安全
深入理解TypeScript：增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript：增强JavaScript的类型安全性
G0518
45 0
代码bug生产队
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript：类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript：类型系统与实用技巧
代码bug生产队
63 0
六卿
|
2月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口（interfaces）的基本概念和用法，包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式，可以规定对象的必有属性、可选属性、自定义属性和只读属性。
六卿
41 1

热门文章

最新文章

  • 1
    TypeScript 函数
  • 2
    攀爬TS之路(六) 类型别名、字面量类型、枚举
  • 3
    TypeScript 泛型
  • 4
    nodejs 不支持 typescript （...paramName:any[]）剩余参数。变相支持方式。
  • 5
    推荐 7 个学习 TypeScript 的宝库，2021 学 TS 看这篇就够了！
  • 6
    TypeScript的概要和简介
  • 7
    TypeScript 真香，说说它的优缺点
  • 8
    TypeScript-类装饰器和TypeScript-defineProperty
  • 9
    TypeScript入门之数据类型
  • 10
    前端学习案例-react18+ts+redux实战1-rudux-tookit
  • 1
    TypeScript 迁移
    17
  • 2
    如何学习typescript？
    35
  • 3
    TypeScript接口与类型别名：深入解析与应用实践
    68
  • 4
    React 项目中有效地使用 TypeScript
    42
  • 5
    React 和 TypeScript
    118
  • 6
    TypeScript取代JavaScript的优势
    65
  • 7
    Typescript 【实用教程】（2024最新版）含类型声明，类型断言，函数，接口，泛型等
    79
  • 8
    TypeScript的介绍,let age:number = xxx，可以直接看出数据类型，Type由微软开发，可以在任何浏览器和系统中运行，比较适合大型项目,TypeScript的安装
    55
  • 9
    node，npm汇总，pip汇总，typeScript的使用，mybatis,sass的使用中文官网地址：
    38
  • 10
    TypeScript（十六）配置相关（tsconfig配置）
    86

    • 相关课程

    更多
  • Vue.js 入门与实战
  • React 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档

    • 相关电子书

    更多
  • 现代TypeScript高级教程
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 对象和接口-1：对象类型
  • 函数类型-1：基本语法
  • 常见类型-1：空，联合，枚举
  • 常见类型-2：数组和元组
  • 语言入门-2：基本类型
  • 语言入门-1：环境构建
    • 下一篇
    阿里云OSS设置跨域访问