vue.js组件篇

代码复用一直是软件开发中长期存在的一个问题,每个开发者都想再次使用之前写好的代码,又担心引入这段代码后会对现有程序产生影响。从jQuery开始我们就通过插件的形式复用代码,到Requirejs开始将js文件模块化,按需加载,这两种方法都提供了比较方便的复用,但往往还需要自己手动加入所需的css文件和html模块,现在web Components的出现提供了一种新的思路,可以自定义tag标签并拥有自身的模板,样式和交互。Angularjs的指令,Reactjs的组建化都在这方面做尝试。同样vue.js

也提供自身的组件系统,支持自定义tag和原生HTML元素的扩展。

    vue.js创建组建构造器的方式非常简单,

    var MyComponent=vue.extend({……});

    但是现在这个组件还是无法直接使用,需要将组件注册到应用中。vue.js提供了两种注册方式分别是全局注册和局部注册。

全局注册:

    全局注册需要确保在根实例初始化之前注册,这样才能使组件在任意实例中被使用,注册方式如下:

    vue.component('my-component',MyComponent);

    这条语句需要写在var vm=new Vue({……})之前,注册成功之后,就可以在模块中以自定义元素<my-component>的形式使用组件。对于组件的命名,W3C规范是字母小写且包含一个短横杠“-”,Vue.js暂不强制要求。

局部注册:

    局部注册则限定了组件只能在被注册的组件中使用,无法在其他组件中使用,注册方式如下:

    var MyComponent=vue.extend({

    template:'<p>This is a child component</p>'

});

var Parent=Vue.extend({

    template:'<div>\

    <p>This is a parent component</p>\

    <my-child></my-child>\

    </div>'

    components:{

    'my-child':Child

}

})


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值