组件是可复用的 Vue 实例，vue的核心就是组件的使用，玩好了组件才能将前面的基础更好的运用起来。组件使我们的项目解耦，更加符合vue的设计思想MVVM。组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树, 这里可以将组件理解为 java 里的方法，通过方法名调用方法
head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <wdh01 name=" wdh01"></wdh01> </div> <script> Vue.component(‘wdh01‘,{ props:[‘name‘], template: ‘<h3> hello {{name}} !!!</h3>‘ }) /* 定义组件 wdh01 组件名称 template 组件内容，定义好组件，可以通过组件名称调用组件： 这里可以将组件理解为 java 里的方法，通过方法名调用方法 */ var app = new Vue({ el:‘#app‘, data:{ input_info:‘please inpue some info‘ } }) </script> </body>
如上：我们定义了一个简单的组件，运行页面可得到瑞一下结果：
原文：https://www.cnblogs.com/wdh01/p/13195344.html