Vue3 组合式 API 实战

最近在详细学习vue3的知识点，通过小案例可以更融会贯通的理解，为了更好地理解 setup()、ref()、reactive()、computed()、watch() 等核心概念，我决定动手实现一个「任务清单 TodoList」。 这篇文章将记录我学习到的知识点

核心知识点：

（1）ref 与 reactive:
ref:基本数据类型，reactive:数组，对象
（2）computed实现任务筛选：

const filteredTodos = computed(() => {
  if (filter.value === 'active') return todos.filter(t => !t.done)
  if (filter.value === 'completed') return todos.filter(t => t.done)
  return todos
})

组件通信：

1. 父组件到子组件的通信（props）
   父组件通过props将数据传递给子组件，子组件接受的props是只读的

<!-- Parent.vue -->
<template>
<Child :message="parentMessage" />
</template>

<!-- Child.vue -->
<template>
<p>{{ message }}</p>
</template>
<script>
const props =defineProps({
message : String})
</script

2.props的写法
(1)基本对象类型声明：

<script>
 const props = defineProps({
     message：{
       type:String,
       default: 0,
       required: true
     }
     
 })
</script>

(2)ts格式

<script setup lang="ts">
interface Props {
  title: string
  count?: number
}

const props = defineProps<Props>()
</script>

(3)数组形式

<script setup>
const props = defineProps(['title', 'count'])
</script>

3.子组件到父组件通信(emit):
子组件通过$emit向父组件发送事件，父组件监听并获取带过来的参数

<!-- Parent.vue -->
<template>
  <Child @update="handleUpdate" />
</template>

<!-- child.vue -->
<button @click="sendUpdate">Send to Parent</button>
<script>
const emit = defineEmits(['update'])
function sendUpdate() {
  emit('update', 'Hello Parent')
}
<script>

v-model的自定义事件

1. 在v-model中通过prop和emit进行数据的双向绑定，在此中了解明白其双向数据流动的解基本原理

• prop：value -> modelValue；
• 事件：input -> update:modelValue；
• 新增 支持多个v-model
• 新增 支持自定义 修饰符 Modifiers

2. 在这里先只了解学习基本用法

 <div>
  我是父组件:<input type="text" v-model="isfu">
 </div>
 <v-model v-model="isfu"></v-model>

</template>
<script setup lang='ts'>
import { ref } from 'vue';
import vModel from './components/v-model.vue';
const isfu =ref('')

 <div>
  我是子组件:
  <input type="text" :value="modelValue" @input="sent">
 </div>

</template>
<script setup lang='ts'>
const prop =defineProps({
  modelValue:{
    type:String
  }
})
const emit =defineEmits(['update:modelValue'])
const sent =(e:Event)=>{
  emit('update:modelValue',(e.target as HTMLInputElement ).value)
  
}
</script>

子组件通过prop接收，emit再将数据发送给父组件