Vue实践--初识组件

组件是Vue.js的核心,因为组件可以复用,能够做到一套代码,在任何地方都可以用,所以维护的成本大大缩小。

Vue的组件在复用的时候是相互独立的;

Vue组件的使用:先注册(局部注册/全局注册),后使用,而且要在实例创建前注册(new之前);

注册也分为全局注册和局部注册,下面来说一下两者的区别...

全局注册:

在全局的vue环境中均可以使用(相当于全局变量一样),注册方法:使用Vue.component("组件名",{//options})类似于这样的写法进行全局注册,在这里要注意的是:

组件名:推荐使用小写加"-"分割的形式,例如:

Vue.component("my-component",{
			template:"
这是一次非常美好的邂逅
" })

局部组件注册:

在实例的components选项中定义和注册(值是一个对象,包含templete,porps等很多选项),只有在该实例所挂载的元素内部使用。例如:

var myApp = new Vue({
			el:"#container",
			data:{
				datas:"前端之旅"
			},
			components:{
				"jb-component":{
					template:"局部注册的组件"
				}
			}
		})
现阶段个人理解:

组件就像Vue实例一样,除了拥有template选项外,还有data,methods,computed选项等等;作用也和实例中对应的选项的差不多(组件可以直接访问,或者在某种程度上,可以将组件视作小实例),只不过组件中的data选项必须是一个函数,然后将数据return出去。


你可能感兴趣的:(Vue实践--初识组件)