Vue学习笔记14-全局组件和局部组件

前言：
有时候，我们不希望页面的某部分代码重复地去写，造成代码冗余，所以我们是否能够把这些代码单独拿出来当作一个组件一样，当我们需要地时候直接去引用它就行。正因如此，Vue就为我们提供了全局组件和局部组件。

1.全局组件：

• 首先我们创建一个Vue实例：

const app = new Vue({
        el: "#app",
        data: {
        }
    });

• 创建html模板：

<div id="app">
</div>

• 然后我们就可以在js标签里添加全局组件了：

Vue.component("counter",{     //此处的conunter为自定义的组件名称，可以使用组件名称来引用
	template:"<button @click='num++'>点我加1，{{num}}</button>",   //此引号里为组件代码
	data(){     //data类型必须为函数
            return{
              num: 0     //在return里添加组件的data数据模型的数据
            }
        }
});

• 引用组件

<div id="app">
        <counter></counter>
        <counter></counter>
        <counter></counter>
</div>

• 运行代码查看：
  
  
• 我们可以看到，每个被引用的组件里的数据都是相互独立不会互相影响，这就是上面定义组件时候，data类型为什么要为函数的用处了。
• 那既然叫全局组件，是否可以在其他Vue实例里使用？当然是可以的。只要被Vue实例化都可以去使用它，例如如下：

 <div id="app">
        <counter></counter>
</div>

<div id="bpp">
        <counter></counter>
</div>

2.局部组件：

• 我们直接在js标签里定义一个对象：

const hello = {      //组件名称为hello
        template: "<div>大家好，我叫{{name}}，我是局部组件</div>",
        data(){
            return{
                name: "weiwei"
            }
        }
    };

• 我们如果要使用这个局部组件，就必须在Vue实例里面去引用它：

 const app = new Vue({
        el: "#app",
        data: {
        },
        components: {   //使用关键词components去引用它
          hello1: hello    //key为要自定义组件名称，value为局部组件的名称
        }
    });

• 我们来使用一下：
  
• 测试成功。
• 当然，我们不会把这些组件放在这个页面上使代码看起来很乱，我们做项目时可以专门写用一个页面来放这些组件。