介绍

组件是可 复用 的 Vue 实例

如下图案例，如果不用组件，就需要定义 3个 商品图片、名称、价格，使用组件就可以避免重复代码：

如下图 饿了吗vue的日期时间组件，该功能较常用，但实现起来复杂，定义成组件后，可在多处 复用该代码

一句话理解

封装代码较多的功能，简化重复使用

如：日期时间组件，一般包括：html、css、js

应用场景

• 实现页面
• 复杂的控件（如：日历控件）

作用

复杂的界面、功能，代码重复使用

案例

传统方式 实现上图的商品列表

html

缺点：显示几个商品，就需要定义几个 div，一旦需要调整样式或界面，这几个 div 都需要改动，麻烦

<div id="app">

    <div >
        <img src="img/20231116_133706.png"/>
        <br>
        {{name1}}
        <br>
        ￥{{price1}} 惠
    </div>

    <div >
        <img src="img/20231116_133706.png"/>
        <br>
        {{name2}}
        <br>
        ￥{{price2}} 惠
    </div>

    <div >
        <img src="img/20231116_133706.png"/>
        <br>
        {{name3}}
        <br>
        ￥{{price3}} 惠
    </div>

    <div >
        <img src="img/20231116_133706.png"/>
        <br>
        {{name4}}
        <br>
        ￥{{price4}} 惠
    </div>
</div>

js

<script src="js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',//选择器: id 样式、元素选择器等  但元素选择器不能绑定body html元素
        data:{
            name1:"洗衣机",
            price1:1000,
            name2:"格力洗衣机",
            price2:2000,
            name3:"apple洗衣机",
            price3:20000,
            name4:"华为洗衣机",
            price4:4000
        }
    });
    console.log("vm:",vm)
</script>

原文出处：/show_1IXNoCaqRza.html