尚硅谷—TodoList案例

最新推荐文章于 2024-06-25 10:16:38 发布

h_jQuery

最新推荐文章于 2024-06-25 10:16:38 发布

阅读量872

点赞数

分类专栏： es6 Vue javascript 文章标签： vue.js javascript node.js

本文链接：https://blog.youkuaiyun.com/h_jQuery/article/details/119926975

版权

本文详细介绍了在Vue.js中进行组件化编码的流程，包括如何拆分静态和动态组件，处理数据的位置，以及组件间的通信。强调了props的使用场景，特别是不能在v-model中绑定props的值，同时指出尽管可以修改props传递的对象属性，但不推荐这样做。文中还列举了具体的组件文件如header、list、item和footer。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.组件化编码流程

1.1 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突

1.2实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用

1.2.1 一个组件在用：放在该组件的data中即可

1.2.2 一些组件在：放在他们共同的父组件上

1.3实现交互：从绑定事件开始

2.props适用于：

2.1父组件——>子组件通信

2.2子组件——>父组件通信（要求父组件先给子组件一个函数，然后子组件调用该函数，将数据当参数传给父元素）

3.使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的

4.props传过来的若是对象类型的值，修改对象中的属性时，Vue不会报错，但不推荐这样做

header.vue

<template>
  <div class="todo-header">
    <input
      type="text"
      placeholder="请输入你的任务名称，按回车键确认"
      @keyup.enter="addItems"
      v-model="title"
    />
    <span v-if="flag" class="showtips">*内容不能为空</span>
  </div>
</template>

<script>
// nanoid：获取唯一的标识，是uuid的变种，轻量级的uuid
import {
    nanoid } from "nanoid";
export default {
   
  name: "SearchHeader",
  data() {
   
    return {
   
      title: "",
      flag: false,
    };
  },
  // 接收父组件传递来的数据（函数）
  props: ["addItem"],
  methods: {
   
    addItems() {
   
      // 效验数据
      // this.title.trim()
      if (!this.title.trim()) {
   
        this.flag = true;
        this.title = "";
        return;
      }
      this.flag = false;
      // 将用户的输入包装成一个对象
      // console.log(e.target.value);
      const obj = {
   
        id: nanoid(),
        title: this.title.trim(),
        done: false,
      };
      // console.log(obj);
      // 调用该函数，将添加的对象作为参数
      this.addItem(obj);
      // 清空输入框的内容
      this.title = "";
    },
  },
};
</script>
<style scoped>
.todo-header input {
   
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}
.todo-header input:focus {
   
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0px, 0x, 8px,
    rgba(82, 168, 236, 0.6);
}
.showtips {
   
  font-size: 10px;
  color: red;
}
</style>