Vue组件详解

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板。通常一个应用会以一棵嵌套的组件树的形式来组织：

在这里插入图片描述

第一个Vue组件

使用 Vue.component() 方法注册组件：
说明：

Vue.component():注册组件
my-component-li:自定义组件的名字
template:组件的模版

当我们需要传递参数都组件时，需要使用props属性！

注意：默认规则下 props 属性里的值不能为大写：

component.html代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>


<div id="app">
    <ul>
        <my-component-li v-for="item in items" v-bind:proitem="item">my-component-li>
    ul>
div>
<script>
    //先注册组件
    Vue.component('my-component-li',{
        template:'Hello {{proitem}}
',
        props:['proitem']
    })
    //再实例化 Vue
    var vm=new Vue({
        el:"#app",
        data:{
            items:["冷丁1","冷丁2","冷丁3"]
        }
    });
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这里插入图片描述
说明：

对组件传递数据的理解，我们首先注册了一个组件，Vue.component(),里面用键值对的方式注册一个组件，此后my-component-li这个标签就相当于标签< li >Hello {{}}< /li >。

然后我们再div中使用我们刚刚定义好的组件，想遍历出数据，首先用v-for遍历items数组，得到item的值，数据遍历虽然成功了，item取出值了，但是组件里面无法直接取得item，需要定义一个参数来接收，我们使用props:[proitem]，这个参数来接收item，最后用v-bind 将proitem的值绑定数据item

v-for=“item in items” ：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数
量的组件；
v-bind:item=“item” ：将遍历的 item 项绑定到组件中 props 定义的名为 item 属
性上；
= 号左边的 item 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值

如果对您有帮助，免费的赞点一个～～～感谢🙏

在这里插入图片描述

相关阅读:
python调用c++版本dll06-返回数组结构体
二十、设计模式之迭代器模式
【设计模式】以国足的例子来解释代理模式，希望自己不要被退钱
【Unity3D】纹理贴图 ( 纹理 Texture 简介 | 为 3D 模型设置纹理贴图 )
Netty实践 -- Netty处理粘包拆包
深度学习中自监督学习
【ASP.NET Core】MVC控制器的各种自定义：修改参数的名称
NFT：以最简单的方式解释NFT项目的一般架构
面试官：你了解数据湖吗？翻译翻译什么是数据湖
23.Gateway 动态路由，负载均衡（springcloud）

原文地址：https://blog.csdn.net/qq_41359998/article/details/122876128