Vue基础之组件注册

组件注册分为全局注册和局部注册。

局部注册：

在Vue实例中，使用componen选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。组件中也可以使用components选项来注册组件，使组件可以嵌套。

代码:

//html代码
<div id="app">
		<my-component></my-component>
</div>

//js代码
<script type="text/javascript">
     var Child={
           template:'<div>这里是局部组件内容</div>'
     }
     var app=new Vue({
	 el:'#app',
	 components:{
		'my-component':Child
	 }
     })
 </script>

全局注册:

全局注册后，任何Vue实例都可以使用。要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用＜mycomponent></mycomponent>的形式来使用组件。

//html代码
<div id="app">
		<mycomponent></mycomponent>
	</div>
//js代码
<script type="text/javascript">
     Vue.component('mycomponent',{
             template:'<div>这里是全局组件内容</div>'
     }) ;
     var app=new Vue({
	 el:'#app',
     })
 </script>

注意：template的DOM结构必须被一个元素包含，如果直接写成“这里是.....的内容”，不带“<div></ div＞”是无法渲染的。

另外Vue组件的模板在某些情况下会受到HTML的限制，比如＜table＞内规定只允许是<tr>、＜td＞、<th＞等这些表格元素，所以在＜table＞内直接使用组件是无效的。这种情况下，可以使用特殊的is属性来挂载组件。

代码：

//html代码
<div id="app">
	<table>
	   <tbody is="mycomponent"></tbody>
	</table>
</div>

//js代码

<script type="text/javascript">
     Vue.component('mycomponent',{
             template:'<div>这里是全局组件内容</div>'
     }) ;
     var app=new Vue({
	 el:'#app',
     })
 </script>