Vue组件

最新推荐文章于 2024-09-06 14:35:24 发布

童、一

最新推荐文章于 2024-09-06 14:35:24 发布

阅读量96

点赞数

分类专栏： # Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44432831/article/details/115535564

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

学习目标：

Vue的组件

学习内容：

Vue的组件

学习时间：

学习产出：

五、Vue的组件

1、介绍

组件是可复用的Vue实例，说白了就是一组可复用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment
等框架有异曲同工之妙。通常一个应用会以一课嵌套的组件树的形式来组织：

在这里插入图片描述

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

2、第一个Vue组件

注意：在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建，vue模板文件的方式开发，以下方法只是为了让大家理解什么是组件。

使用Vue.component()方法注册组件，格式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.min.js"></script>
</head>
<body>
<!--在Vue对象中定义el和data，data中定义一个items存储数据，然后通过Vue.component中定义一个组件
    组件名字叫java，组件中通过props接收参数，template模板vue，
    在div中实现组件，通过v-bind绑定vue参数，同时让vue=items遍历出来的item
    在java组件中遍历出来items中的item内容，然后赋给Vue.component中的template
    即通过v-for循环出三个template，template中vue的值为item的内容-->
<!--View层 模板-->
<div id="app">
    <!--组件：传递给组件中的值：props-->
    <java v-for="item in items" v-bind:vue="item"></java>
</div>
<script>
    /*定义(注册)一个Vue组件component*/
    Vue.component("java",{
        props:['vue'],/*接收的参数*/
        template:'<li>{{vue}}</li>'/*模板*/
    })
    var vm = new Vue({
        el:"#app",
        data:{
            items:["Java","C++","Python"]
        }
    });
</script>
</body>
</html>

说明：

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