vue学习（二）+组件 prop

最新推荐文章于 2021-11-09 15:10:51 发布

小卜妞~

最新推荐文章于 2021-11-09 15:10:51 发布

阅读量222

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_33866063/article/details/88527389

版权

本文深入探讨Vue中的组件使用，通过组件拆分优化代码结构，讲解如何通过prop传递数据，并实现点击子组件删除该项的功能。同时介绍了prop的类型检查，确保组件接收到的数据符合预期。

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

vue是通过一个一个的实例组成的，我们一般定义var vm = new vue({...}) 叫做根实例，每一个模板也是一个实例。

在script中定义全局或局部组件component，全局组件可以直接在html中使用，局部组件需要在根实例中声明，如以下代码中注释的部分，components:{ 'todo-item': TodoItem}。在html中使用的时候就可以直接当作dom标签来使用了。

组件拆分的小栗子

我们开发网站时，比如显示商品的页面，一般会有多个ul，li标签来陈列多个商品，如果每一个商品都写这么多html标签的话，代码就太繁琐了。所以将公共部分放入组件中，循环调用。

一个vue项目是由vue实例组成的，每一个组件也相当于一个vue的实例，所以自己定义的组件也可以定义template和methods等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.js"></script>
</head>
<body>
<!--todoList组件拆分-->
<div id="root">
    <div>
        <input v-model="inputValue" type="text" @keyup.enter="handleSubmit"/>
        <button @click=