前端mvvm框架vue.js(2)——组件

2016-08-11  本文已影响0人  Thstone

vue.js借鉴了angluar.js关于组件的内容,同时增加自己的新特性,而且组件注册非常灵活多变;支持单文件的方式,使组件开发更为清新明了。

使用组件

1,注册

vue.js提供一系列的方法创建和注册组件,这些方法包括:Vue.extend,Vue.component

//组件创建和注册
var myComponent=Vue.extend({
 //选项对象options,这里声明组件包含的东西
})
Vue.component("my-component",mycomponent);
//注意单独使用这种用法,组件是全局注册的

组件注册后,可以以自定义元素my-component的方式写在父组件的模板中,同时要确保在根实例化之前注册了组件

2,局部注册

在不需要全局注册组件时,使用components选项将组件注册到另一组件内部。

var childComponent=Vue.extend({
//选项对象
})
var parentComponent=Vue.extend({
   template:"...",
   components:{"my-component":childComponent}
})

3,注册语法糖

可以直接传递选项对象给Vue.component和components

//注册组件
Vue.component("my-component",{
 template:"<div>注册语法糖下注册组件</div>"
})
//局部注册的语法糖
var parent=Vue.extend({
  components:{
     "my-component":{
          data:{msg:"hello vue.js"},
          template:"<div>局部注册语法糖</div>"
      }
    }
})

组件选项问题

特殊的选项:data和el,直接使用时,所有实例将共享这两个选项,此时可以将这两个选项注册为方法

var myComponent=Vue.extend({
 data:function(){
  return{a:1}
}
})
上一篇下一篇

猜你喜欢

热点阅读