vue 组件定义、注册、使用流程 全局组件与局部组件区别 --重学vue.js笔记(10)

背景
以前使用js开发电商首页的时候（如淘宝首页），我们需要书写两千多行代码。

如果使用vue进行开发，我们就可以将网页功能模块化，比如将头部区域划分为一个模块，轮播图划分为另一个模块，页脚部分划分为一个模块。每个模块有独立的html/css/js代码。那么，这些模块我们只需要编写一次，后期就可以重复使用了。这就大大加快了开发效率。

我们可以把以上的独立模块称作为组件。接下来，将会介绍如何定义组件、注册组件、挂载组件等。

1.定义组件

	   <script type="text/javascript">
		   ...
		  let son={
			  template:'<div>我是子组件</div>'
		  }
		  ...	 
	   </script>

我们需要声明一个变量子组件，右边是一个对象，在对象中传入template这个属性，属性值为子组件内容。
注意：子组件只能有一个根节点。

2.注册组件

  let vm=new Vue({
			  el:'#app',	
		    
		      components:{
				  son:son
			  }
			
		  });		

我们需要通过将子组件挂载到根实例vm中，子组件才能被使用，我们需要将子组件变量传入components属性值中。左边的son是变量，右边是我们刚刚传入的子组件名。
左边的变量名可更改。

3.使用组件

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

在components中注册的变量名，用一对尖括号包裹起来，以双标签的形式就可以在网页中正常显示啦。

小结如下：

---

问题

子组件html代码写在js不好，代码不易读，也不方便编辑修改。

解决方案：在html中使用template标签包裹子组件代码

注意：在template标签中增加id属性，在定义组件的时候给template属性传入对应的id值，在id值前面加上’#’

全局组件创建与使用

必须要挂载在父组件中的的组件称作为子组件，如上面的写法。

全局组件：不需要挂载在父组件，可以直接使用的组件称作为全局组件

以下是全局组件的写法：

全局组件与子组件的主要区别在于
1.注册方式不一样，子组件需要挂载在父组件中才能使用，而全局组件则不需要，注册即可使用。
2.范围不一样，全局组将可应用于任意vue实例。