自定义组件

什么是组件

组件（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++;
                }
              }
            }
          }
        });