Vue3: 组合式API和TS

前端星辰

已于 2023-09-06 08:45:37 修改

阅读量212

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-09-04 16:41:01 首次发布

本文链接：https://blog.csdn.net/m0_56976483/article/details/132670170

版权

本文介绍了如何使用Vite新一代构建工具创建项目，以及如何通过defineProps实现父组件向子组件的数据传递，defineEmits用于子组件向父组件的事件通信。还讨论了在Vue3中解决computed不能直接传参问题的方法，通过闭包实现数据处理。

摘要由CSDN通过智能技术生成

一、使用vite新一代构建工具创建项目

npm create vite project-name

二、使用defineProps组件父传子通信

父组件准备数据data，在子组件标签自定义属性data绑定值

<template>
  <div id="parent">
    <child :data="data"></child>
  </div>
</template>

<script lang="ts" setup>
import child from './child.vue'
import {reactive} from "vue";
const data = reactive([
  {
    id: 1,
    name: "张三",
  },
  {
    id: 2,
    name: "李四"
  },
  {
    id: 3,
    name: "王五"
  },
])
</script>

子组件准备接口type定义类型，不然ts会报红

<template>
  <div id="child">
    <div v-for="item in data" :key="item.id">{{ item.name }}</div>
  </div>
</template>

<script lang="ts" setup>
interface item {
  id: number,
  name: String
}
defineProps({
  data: {
    type: Array<item>,
    required: true
  }
})
</script>

传默认值，使用withDefaults

第一个参数传入defineProps和类型，注意：defineProps只能有一个，不然会报错。

第二个参数在对象里写上默认值，注意：对象和数组要用箭头函数形式返回默认值

<template>
  <div id="child">
    <div v-for="item in data" :key="item.id">{{ item.name }}</div>
  </div>
</template>

<script lang="ts" setup>
interface item {
  id: number,
  name: string
}
interface data {
  data: Array<item>
}
 withDefaults(defineProps<data>(), {
  data: () => [
    {
      id: 1,
      name: "前端星辰"
    }
  ]
})
</script>

三、使用defineEmits组件子传父通信

父组件准备回调函数，在子组件标签自定义事件绑定回调

<template>
  <div id="parent">
    {{ flag }}
    <child @change="change"></child>
  </div>
</template>

<script lang="ts" setup>
import child from './child.vue'
import {ref} from "vue";
let flag = ref(true);
function change(val: boolean) {
  flag.value = val;
}
</script>

子组件执行defineEmits函数拿到emits函数，通过emits去触发自定义事件和传参

<template>
  <div id="child">
    <button @click="changeStatus">点击改变状态</button>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
let flag = ref(true);
let emits = defineEmits(["change"])
function changeStatus() {  
  flag.value = !flag.value  
  emits("change", flag.value)
}
</script>

如果要写类型声明，可以这样写，defineEmits不需要再传入数组，只需要写类型声明时传入类型对象，类型对象的格式为：{ 键：函数名，值：参数类型数组 }，这里的change是父组件回调函数名，[flag: boolean]键是传入的参数名，值是传入参数的类型

<script lang="ts" setup>
import {ref} from "vue"
let flag = ref(true);
let emits = defineEmits<{
  change: [flag: boolean]
}>()
function changeStatus() {  
  flag.value = !flag.value; 
  emits("change", flag.value)
}
</script>

四、解决computed无法传参的问题

我们经常会遇到这样的场景，要对v-for遍历的某一项数据进行处理，想使用computed却无法传参，想使用filter而vue3却弃用了，无奈只能写成一个函数

实际上我们可以通过闭包的形式解决

<template>
  <div id="parent">
    <div v-for="item in data" :key="item.id">{{ computeName(item.name) }}</div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, computed} from "vue";
const data = reactive([
  {
    id: 1,
    name: "张三",
  },
  {
    id: 2,
    name: "李四"
  },
  {
    id: 3,
    name: "王五"
  },
])
const computeName = computed(() => {
  return (val: string) => {
    return "前端工程师" + val
  }
})
</script>