vue写组件应该注意的问题

最新推荐文章于 2024-05-20 16:16:21 发布

tfxznb

最新推荐文章于 2024-05-20 16:16:21 发布

阅读量565

点赞数 1

分类专栏：补充知识

本文链接：https://blog.csdn.net/qq_37978839/article/details/108879119

版权

本文探讨了在Vue中提高组件复用性的策略，强调将功能函数保留在顶层父组件，通过props向下传递数据和操作。以一个todolist应用为例，详细展示了index、list、listitem和input组件的组织方式，实现数据流的单项传递，简化维护过程。

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

vue写组件应该注意的问题

高度抽离组件功能

高度抽离组件功能

我们知道，vue中的数据流是单项的，所以提升组件复用性最好的办法就是使子组件只展示数据，将功能函数写在最大的父组件中，使用props将函数或者数据进行向下传递，一层一层，当需要维护时，只需要在最大的组件中进行修改即可。
下面我们将一个vue的todolist使用组件进行写
下面上代码

<template>
  <div>
    <my-input :addNew="addNew"></my-input>
    <h2>已完成{
   {
    list.filter((item) => item.done).length }}</h2>
    <my-list
      :listData="list.filter((item) => item.done)"
      :delItem="delItem"
      :edit="edit"
      :changeStatus="changeStatus"
    ></my-list>
    <h2>未完成{
   {
    list.filter((item) => !item.done).length }}</h2>
    <my-list
      :listData="list.filter((item) => !item.done)"
      :delItem="delItem"
      :edit="edit"
      :changeStatus="changeStatus"
    ></my-list>
  </div>
</template>

<script>
import myInput from "./components/Input";
import myList from "./components/List";
export default {
   
  components: {
   
    myInput,
    myList,
  },
  data() {
   
    return {
   
      list: [
        {
    title: "学习vue", done: false, status: 1 },