Vue之创建组件及新发现

首先让我们来认识一下什么是组件，以及组件的作用。
组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件。
组件化和模块化的不同
组件化：是从UI界面的角度进行划分的
模块化，是从代码逻辑的角度进行划分的。
组件可以分为全局组件和私有组件。
下面我们来试着了解一下全局组件

全局组件

我们来尝试创建一个全局组件

第一种方法

	//1.首先，我们使用Vue.extend来创建全局Vue组件
	var com1=Vue.extend({
	template:'<h3>这是我们创建的全局Vue组件</h3>'
	//2.使用component（‘组件名称’，创建出的组件模板对象）
	Vue.component('mycom',com1)
	})
	//创建Vue.实例
	var vm=new Vue({
		el:"#app,
		data:{},
		methods:{}
	})

然后再把创建好的组件扔到页面中

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

效果如下图所示

第二种方法

第二种方法我们可以把上面的两步合并成一部

	Vue.component('mycom2',Vue.extend({
		template:"<h3>这是创建的全局组件</h3>"
	}))

把mycom2丢进页面中

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

效果如下

我们还可以继续简化，省去extend

     Vue.component('mycom1',{
     	template:"<h3>这是创建的全局组件</h3>"
     	})

效果不变

第三种方法
用id方法把template外抛出去

   Vue.component('mycom1',{
            template:'#temp'
        })

然后再js外面用template标签接收，同时，不要忘记把创建的组件名称扔到实例中

	<div id="app">
        <mycom1></mycom1>
    </div>
    <template id="temp">
        <h3>这里的template是外抛出去的</h3>
    </template>

效果如下所示

新发现
在这里我发现，js外接收时若不用template，而改用其他任何标签，也可以达到同样的效果，并且这样做就不需要再往实例中添加组件名称。

	<div id="app">
	</div>
	<p id="temp">
		<h3>这是没用template标签接收</h3>
	</p>
	

效果如下所示

效果看上去还行，在body里的结构也没有出现问题，可是这样子的话
我发现我们创建组件时的组件名称不就是没用上吗？

那我们把这个也抛弃了吧

效果还是没变，照样能打到想要的效果，我们没通过标签名调用组件，而是通过id来调用

看起来很方便，这是我自己偶然发现的，若什么遗漏之处和不妥的地方，希望大家能够指出问题。

私有组件

我们来创建一个私有组件

        var vm=new Vue({
            el:"#app",
            data:{},
            methods:{},
            components:{
                login:{
                    template:"<h1>这是一个私有组件</h1>"
                }
            }
        })
        var vm2=new Vue({
            el:"#app2",
            data:{},
            methods:{}
        })

把组件加入页面中

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

效果如下

这里我们是在vm实例中创建的，vm2没有创建，所以尽管在app2中也加入了组件名称，可以看到并没有效果。同时，还报出了错误。