11_06_第六阶段：大前端进阶||07-Vue详解||P8：Vue组件讲解【Vue.component()|||props传递参数】【观看狂神随笔】_props: ['desc', 'logo', 'title', 'avatar', 'linkli-CSDN博客

本文链接：https://blog.csdn.net/qq_40572023/article/details/120488895

本文介绍了Vue.js中组件的概念，组件是为了复用而创建的自定义标签，如`<zhangzhixi>`。通过Vue.component()方法注册组件并定义模板。示例中展示了如何创建一个显示列表的组件，并通过`v-for`指令遍历数组，利用`v-bind`将数据绑定到组件的props上，从而实现组件内部的数据传递。

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

1. 什么是组件【是为了复用】

在这里插入图片描述

组件就是标签【为了复用】
自定义标签<div>官网的，我们也可以写成<gexiaowei>

使用 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.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <zhangzhixi></zhangzhixi>
</div>
<script type="text/javascript">
    // 定义Vue组件
    Vue.component(
        // 组件名称
        "zhangzhixi", {
            // 组件模板
            template: "<li>Hello World!</li>" +
            ""
        })

    var app = new Vue({
        el: '#app',
    })
</script>
</body>
</html>

说明：

Vue.component()：注册组件
zhangzhixi：自定义组件的名字
template：组件的模板

【下面是重点：】

<!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.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <!--组件：传递给组件中的值props-->
    <zhangzhixi v-for="array in arrays" v-bind:zhixi="array">

    </zhangzhixi>


</div>
<script type="text/javascript">
    // 定义Vue组件
    Vue.component(
        // 组件名称
        "zhangzhixi",
        {
            // "prop"表示组件属性名称
            props: ['zhixi'],
            // 组件的模板
            template: '<li>{{zhixi}}</li>'
        })

    var app = new Vue({
        el: '#app',
        data: {
            arrays: [
                "抽烟",
                "喝酒",
                "烫头"
            ]
        }
    })
</script>
</body>
</html>