Vue组件的简单使用

星空下的问路人

于 2021-08-25 19:59:00 发布

阅读量127

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Z7759/article/details/119918239

版权

本文深入解析Vue组件系统，探讨如何利用组件抽象构建界面，如外卖模块的组件化示例，并演示如何创建和使用组件，如Todo-item实例。讲解了组件间的父子、兄弟和祖孙关系，以及组件的创建过程和基本使用方法。

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

组件介绍

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树
像这个
就拿这个美团的外卖模块来说吧，左边的烧烤，卤味等和右边的菜都是组件
在这里插入图片描述

借用vue官网的一张图来说，组件之间可以是独立的也可以是也可以是相互依赖的，像1和234就是父子关系，而234就是同级的兄弟关系，而1和5就属于爷孙关系了。

组件的创建

Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

列子：

 <div id="app">
        <button-item></button-item>
            </div>
 <script>
        Vue.component('button-item', {
            data: function () {
                return {
                    count: 0
                }
            },
            template:
             `<div>
                <button v-on:click="hand">点击了{{count}}</button>
                    </div>`,
            methods: {
                hand: function () {
                    this.count++
                }
            },
        })
         var vm = new Vue({
            el: "#app",
            data: {

            }
        })


    </script>

这就会出现点击按钮加1的操作
这就是组件简单的使用