组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。就像是python中封装一个类,在其他类中可以继承和调用类中的属性和方法。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

1 全局组件的使用

  1. <body>
  2. <div id="app">
  3. <zj_all></zj_all>
  4. </div>
  5. <script>
  6. Vue.component(
  7. 'zj_all',
  8. {
  9. template: '<div>全局组件定义</div>'
  10. }
  11. )

Vue.component()方法中参数说明

第一个参数指定组件名 第二参数以 {} 形式传递,在里面指定组件的属性,template指定组件的要加载的内容

2 局部组件的使用

  1. <body>
  2. <div id="app">
  3. <zj_all></zj_all>
  4. <div>123<div>456</div></div>
  5. </div>
  6. <script>
  7. var zj_a = {
  8. template: '<div>局部组件定义</div>'
  9. }
  10. Vue.component(
  11. 'zj_all',
  12. {
  13. template: '<div>全局组件定义 <zj_a></zj_a></div>',
  14. // 注册局部组件
  15. components:{
  16. zj_a
  17. }
  18. }
  19. )