自定义组件

什么是组件

组件（component）就是零件，将零件组装成想要的工具（页面）。

组件是 Vue.js 最强大的功能之一，它可以扩展 HTML 元素，封装可重用的代码，通过传入对象的不同，实现组件的复用。

使用组件的好处

• 组件是可以复用性的
• 易于维护
• 有封装性，易于使用
• 大型项目中降低组件之间重复性

全局组件

全局组件：在任何地方，任何方式，任何地点都可以使用的标签组件。

Vue.component("vue-hesder", {
    // h1 标签是我们在自定义主键里面写的参数的标签
    template: '<h1> 标题 </h1>'
})
new Vue({el: '#main'});
new Vue({el: '#main2'});
new Vue({el: '#main3'});

加粗文字 局部组件

局部组件：只是在我们规定的范围之内才会生效。

new Vue({
    el: '#main',
    components: {
        "vue-hesder": {template: '<h1> 标题{{vue}}</h1>'
        }
    }
})

全局组件和局部组件的区别

• 使用范围
  全局：可以再页面中任何位置使用。
  局部：只能在定义它的 el 中使用，不能在其他位置，否则就会失效。
• 定义方法
  全局：可以使用 Vue.component（tagName，options）定义。
  局部：可以通过 Vue 实例中 component 属性定义局部组件。
• 是否挂载
  全局组件在扩展元素用于封装复用代码时不需要挂载，但是不常见，因为会影响浏览器的性能
  局部组件必须手动挂载，否则会失效。
• 其他
  局部组件中代码的编写是”components“, 而全局组件中是”component“。

组件数据交互的特点

    // 全局定义
    // var data = {
    //   vue: 0
    // }
    new Vue({
      el: '#main',
      data: {vue: "Welcome Xkd!"},
      components: {
        "vue-hesder": {template: '<h1 @click="add"> 标题{{vue}}</h1>',
          data: function() {
            // return data;
            // 局部定义，只对当前值进行应用，不会对其他组件有影响和重复性
            return {vue: 0}
          },
          methods: {add: function() {this.vue++;}
          }
        }
      }
    });