defineProps 实现父子组件传值将todoList组件化

哈喽哈喽，我是金樽清酒，昨天我不是用ref响应式数据源写一个todoList表单嘛，今天呀，我要升级一下，将tidoList做成一个组件。

为什么要做成组件？

在Vue中采用组件化的方法有很多好处，这些好处使得Vue成为一个强大而灵活的前端框架。以下是一些主要的原因：

可维护性： 组件化使得代码更易维护。每个组件都是独立的单元，可以独立开发、测试和维护。这降低了代码复杂性，使得整体项目更易于理解和管理。
可重用性： 组件可以在多个地方重复使用。这样一来，你可以在不同的页面或应用中使用相同的组件，减少了代码冗余，提高了开发效率。
分离关注点： 组件化允许你将界面的不同部分拆分成独立的组件，每个组件关注特定的功能或视图。这种分离关注点的方法使得代码更清晰，降低了不同部分之间的耦合度。
提高可测试性： 每个组件都是相对独立的，这使得单元测试和集成测试更加容易。你可以更轻松地测试每个组件的功能，确保其正常工作，并且在整个应用中保持一致性。
更好的团队协作： 组件化使得多个开发者能够并行工作，因为他们可以独立地开发和测试各自的组件。这样一来，团队协作更加高效，每个成员都能够专注于自己负责的部分。
提高可维护性： 组件化使得代码更易维护。每个组件都是独立的单元，可以独立开发、测试和维护。这降低了代码复杂性，使得整体项目更易于理解和管理。

总的来说，Vue中采用组件化的方式可以使前端开发更加模块化、灵活和可维护，同时提高了代码的可重用性和可测试性，有助于构建更大型、复杂的应用。

组件能让我们的功能模块化，提高了可维护性和复用性，但是问题也随之而来，我们如何将父组件的值，传递到子组件当中呢？比如我要做一个todoList列表。数据源在父组件里面，靠input框输入到响应式数据ref里面，姑且取名为data。那如何把data传递到子组件里面去呢？

defineProps传值

关于上述的问题，我们可以用defineProps来解决。defineProps就是用来解决父子组件传值的。如何去使用呢？我们从下面的代码进行分析。

js 复制代码

//子组件
<template>
    <div>
        <ul>
            <li v-for="(item, index) of tidoListData" :key="index">
                {{ index }}: {{ item }}
            </li>
        </ul>
    </div>
</template>
  
<script setup>
import { defineProps } from 'vue';

let props = defineProps({
    tidoListData: {
        type: Array,
        default: () => [] // 默认值可以是一个空数组
    }
});
</script>
  
<style lang="scss" scoped></style>

怎么用呢？首先子组件要import从vue中引用defineProps，然后实例化defineProps。在代码15行，我定义了一个tidoListData数据，它的类型是数组，并且设置了一个默认值为空。然后在第5到6行用v-for循环遍历这个数组，并动态绑定index的值为key。进行list的循环，接下来我们就只需要将父组件的数组绑定这个tidoListData进行传值就行了。注意，我这里使用的是单文件组件。

js 复制代码

//父组件
<template>
  <div>
    <hello :msg="'钟氏珠宝店'" class="header" />
    <input v-model="inputValue" />
    <button @click="handleAddItem">添加商品
    </button>
    <button @click="deleteAddItem">删除商品
    </button>
    <div id="app">
      <ul>
        <list :tidoListData="data" />
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import hello from "./components/hello.vue"
import list from "./components/list.vue"

const inputValue = ref('')
const data = ref([])


const handleAddItem = () => {//往数组里面添加数据
  data.value.push(inputValue.value)
  console.log(data.value)
  inputValue.value = ''
}
const deleteAddItem = () => {//往数组里面删除数据
  data.value = data.value.filter(item => item !== inputValue.value);
  console.log(data.value)
  inputValue.value = ''
}


</script> 

<style lang="less" scoped>
.header {
  text-align: center;
}
</style>

在代码12行，我们把子组件的todoListData绑定父组件的data数组，就完成了父子组件的传值。注意，父组件要引入组件哦。

代码效果

总结

组件化的思想可以提高代码的维护性和复用性。可以实现多人协作的完成一个项目，类似于函数功能模块化。用vue自带的defindProps可以实现父子组件传值。注意引入的是defineProps哦,小编我刚开始打成了definedProps，心态都快崩了，希望友友们不要犯这个错误。

defineProps 实现父子组件传值 将todoList组件化

defineProps 实现父子组件传值 将todoList组件化

为什么要做成组件？

defineProps传值

代码效果

总结

defineProps 实现父子组件传值将todoList组件化

defineProps 实现父子组件传值将todoList组件化