您的位置:首页 > 产品设计 > UI/UE

Vue实践--初识组件

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

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

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

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

全局注册:

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

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

Vue.component("my-component",{
template:"<div>这是一次非常美好的邂逅</div>"
})
局部组件注册:

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

var myApp = new Vue({
el:"#container",
data:{
datas:"前端之旅"
},
components:{
"jb-component":{
template:"<span>局部注册的组件</span>"
}
}
})现阶段个人理解:
组件就像Vue实例一样,除了拥有template选项外,还有data,methods,computed选项等等;作用也和实例中对应的选项的差不多(组件可以直接访问,或者在某种程度上,可以将组件视作小实例),只不过组件中的data选项必须是一个函数,然后将数据return出去。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: