Vue组件创建详解-优快云博客

本文链接：https://blog.youkuaiyun.com/radmdzjtx/article/details/123657865

这篇博客主要介绍了Vue组件的创建过程，通过Vue.component方法定义自定义标签，并使用template定义组件内容。文章强调了如何在父组件中通过v-for和v-bind绑定数据到组件，并通过props接收传递的数据。文中提供了一个实例代码，鼓励读者尝试修改参数以加深理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次学习学习的是vue的组件创建
用的则是Vue.component与其中的template组件
这一部分有可能比较难理解
下面看如下例子我来做一解释
在这里插入图片描述
首先我们要通过Vue.component()这个方法去创建标签，第一个参数写你创建标签的标签名。
第二步我们需要在其中利用templlate来写出标签的内容，这个根据自己的喜好自己写就行。
第三步则是需要将你写的这个标签进行显示调用，所以我们需要在div里调用你这个标签，我们这里就使用v-for循环然后使用v-bind绑定前面v-for中创建的item数据，我们将这个绑定的数据名称设为ppp
最后再利用Vue.component里的props接收这个名为ppp的数据，这样就可以显示出来了。

这时候有人可能就疑惑了，为什么不在Vue.component中直接调用data中的数据，答案是不能直接调用，所以我们才会在div中v-bind绑定data中的数据，然后传给component中达成间接调用的效果。
下面把我写的代码放上去，大家可以去改改里面的参数体验体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <lzy v-for="item in items" v-bind:ppp="item"></lzy>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    Vue.component("lzy",{
        props:['ppp'],
        template:'<li>{{ppp}}</li>'
    })
    var vm =new Vue({
        el:"#app",
        data:{
            items:["Java","Linux","Vue"]
        }
    });
</script>
</body>
</html>

Vue之组件创建