Vue.js组件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Yvan_Lin/article/details/80429944

本文介绍了Vue.js中的组件概念及其使用方法。通过实例演示了如何创建自定义组件，并详细解释了组件内部data属性为何需要定义为函数，以确保每个组件实例的数据独立性。

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

使用vue进行开发的时候，必然会使用到组件这个东西。那么什么是组件呢，简单粗暴点来讲，组件就是用原有的html标签来自定义的标签，因为是自定义的，所以可以加上一些自己希望的一些功能，同时也方便在多个地方进行复用，如下（代码中）

<div id="app-1">
    <todo-item></todo-item>
    <todo-item></todo-item>
    <todo-item></todo-item>
    <button @click="clear()">clear</button>
</div>
<template id="task-template">
    <ul>
        <li
                @click="task.completed=!task.completed"
                :class="{'is-finished':task.completed}"
                v-for="task in list"
        >{{task.body}}</li>
    </ul>
</template>
<script src="../script/vue.js"></script>
<script>
    Vue.component('todo-item', {
        template: '#task-template',
        data:function () {
            return {
                list:[
                    {
                        body:'健身',
                        completed:true
                    },
                    {
                        body:'打代码',
                        completed:false
                    }
                ]

            }
        }
    })
    var main=new Vue({
        el:'#app-1',
        data:{
        }
    })
</script>

其中<button-counter>标签就是我们自己通过Vue.component自定义出来的标签。在这个方法里面，除了传进标签名之外，还需要传入一个对象，对象里面就包括，data（数据）、template（模板，也就是原本的html标签）等

值得注意的是，平时我们实例化一个Vue对象的时候，采用的data就是一个对象形式，但在组件里面，这是不行的（敲黑板）。data必须是一个函数，具体例子看官网链接这是为了保证每个组件在进行复用时的独立性

javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响