Vue系列教程（11）- 组件详解（Vue.component、props）

最新推荐文章于 2024-02-08 10:28:07 发布

杨林伟

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量1.4k

点赞数 3

分类专栏： # Vue系列教程

本文链接：https://blog.csdn.net/qq_20042935/article/details/118191376

版权

Vue系列教程专栏收录该内容

33 篇文章 34 订阅

订阅专栏

文章目录

1. 引言
2. 组件
- 2.1 注册组件（Vue.component）
- 2.2 传递参数（使用props属性）
3. 注意事项

1. 引言

通过前面的章节，我们已经学会了vue的Model内容数据双向绑定，有兴趣的同学可以参阅下：

本文主要讲的是Vue的新知识**“组件”**。

2. 组件

组件就是一组可以重复使用的模板，简单的说就是可重复使用的Vue示例。

2.1 注册组件（Vue.component）

先贴上代码：

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


<div id="app">
    <pan></pan>
</div>


<script type="text/javascript">
    //先注册组件
    Vue.component("pan", {

        template: '<li>Hello</li>'

    });
    //再实例化Vue
    var vm = new Vue({
        el: "#app",
    });
</script>

</body>
</html>

在上述的代码可以看到，使用了Vue.component来定义了模板（类似于FreeMarker）并以关键字pan为标签名，然后在代码里直接引入定义的pan标签名就可以显示定义模板里面的格式及内容了。运行效果如下：
在这里插入图片描述

2.2 传递参数（使用props属性）

当然我们希望的是，模板里面内容会动态改变，那么 “标签” 和 “模板” 的内容如何关联呢？先贴上代码：

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

<div id="app">
    <!--组件：传递给组件中的值：props-->
    <pan v-for="item in items" v-bind:panh="item"></pan>
</div>


<script type="text/javascript">
    //定义组件
    Vue.component("pan", {
        props: ['panh'],
        template: '<li>{{panh}}</li>'

    });
    var vm = new Vue({
        el: "#app",
        data: {
            items: ["java", "Linux", "前端"]
        }
    });
</script>
</body>
</html>

可以看到：

Vue.component里面使用了props属性，入参为panh
然后把入参panh定义到了引入标签的代码即：v-bind:panh="item"

整个流程下来：

首先把data里面items的内容使用v-for先遍历
然后把每一个item赋值给panh参数
最后把panh入参的内容，赋值到了template模板的<li>{{panh}}</li>里面了

最后效果图如下：
在这里插入图片描述

3. 注意事项

在文末，需要提下注意的事项：

默认规则下props属性里的值不能为大写；
v-for="item in items"：遍历Vue实例中定义的名为items的数组。
v-bind:panh="item"：将遍历的item项绑定到组件中props定义名为item属性上；= 号左边的panh为props定义的属性名，右边的为item in items 中遍历的item项的值

本文完！

杨林伟

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue系列教程（11）- 组件详解（Vue.component、props）

文章目录1. 引言2. 组件2.1 注册组件（Vue.component）2.2 传递参数（使用props属性）3. 注意事项1. 引言通过前面的章节，我们已经学会了vue的Model内容数据双向绑定，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调试》
复制链接

扫一扫