Vue局部组件和全局组件

Vue中的局部组件和全局组件

    Vue中我们在定义组件时，需要先创建一个组件构造器，然后再跟据实际情况，采用局部组件定义和全局组件定义。
    首先我先说一下为什么使用自定义组件，我们再写前端代码时候会遇到代码重复性高，或者说是代码冗余，观赏性不美观，我简单举个例子：
我们想让这个div中的内容重复出现多次，我们会多复制几行

运行结果：

当我们想着多复制几行，会这样做

结果就是：

但是如果我们采用了Vue中自定义组件会使得浏览性更美观简洁：

<script type="text/javascript">
//步骤1.组件构造器
		const cpn = Vue.extend({  //这边是我们自定义的模板
			template:`  
			<div>
		       <h2>你好，ld</h2>
			   <h2>你也好<h2>
			</div>
			`,
			})
		//步骤2.全局注册组件
		Vue.component('my-cpn',cpn);  //cpn为构造器对象，'my-cpn'是自定义的组件，我们就可以在body中写入我们自定义的组件了
		const app = new Vue({
			el:'#app',
		})
		</script>

结果：

上面是定义了一个全局的组件，这个组件可以在任意创建Vue实例中使用，那么局部组件 是怎样的形式呢？
我来简单演示一下：

	const cpn2 = Vue.extend({
			template:
				`<div>
				   <p>你好</p>
				   <p>你好呀</p>
				   <mycpn></mycpn>
				</div>`,
		})
		const app = new Vue(
		{
			el:'#app',
	        components:       //在vue实例中组测组件,那么她只能在这个实例下进行应用
			{
				mycpn2:cpn2    //自定义组件名称：构造实例对象
			}
		})

局部组件就意味着它只能在Vue实例化中使用。那如果我在实例以外运行呢？
我演示一下：

我们不难看出来它只能在上面的div中显示出来，而下面的还是显示mycpn2，这就是因为我们自定义的组件mycpn2是局部的组件。