Vue组件学习

发表于 | 分类于

什么是组件？

引用官方话就是：

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

其实打个比方就是，组件就好比电脑中的硬盘，显卡，CPU等等，这些零件组成电脑，而组件就组成我们的页面。其中，需要明白的是组件是自定义标签。

怎么使用组件？

使用前需要注册，注册又分两种：

  • 全局注册
  • 局部注册

全局注册

语法：

1
2
3
Vue.component('自定义标签名', {
		        template:"代码块"
		})

示例：

1
2
3
4
5
6
7
8
<div id="app">
    <my-input></my-input>
    <hr>
</div>

<div id="app2">
    <my-input></my-input>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
Vue.component("my-input",{   //全局注册
    template:"<input type='text' placeholder='输入文字'>"

});

new Vue({
    el:"#app"
});

new Vue({
    el:"#app2"
});

上例中，我全局注册一个组件，名为my-input
，它的内容是一个input文本框，因为这是全局注册（注意书写的位置，不在new Vue里），所以在两个实例里都可以引用，结果显示为：

局部注册

语法：

1
2
3
4
5
6
7
8
new Vue({
	// ...
	components: {
		  '自定义标签名': {
		         template:"代码块"
		  }
	}
})

示例：

1
2
3
4
5
6
7
<div id="app">
	<my-input></my-input>
</div>

<div id="app2">
	<my-input></my-input>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
new Vue({
	el: "#app",
	components:{
	   "my-input":{
	           template:"<input type='text' placeholder='输入文字'>"
	   }
	 }
});

new Vue({
	 el: "#app2"
});

这次我将组件my-input注册在实例app里面，此时它只在id="app"中有效，因此结果只显示一个文本框，并且浏览器报错。
注意，此时的components是加了s的，全局注册里没有。