初识Vue.js(七)

组件是Vue.js最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的。

7.1 组件与复用

在业务中很常见的需求,就是一些控件、JavaScript能力的复用。Vue.js的组件就是提高重用性的,让代码可复用,当学习完组件后,上面的问题就可以分分钟搞定了,再也不用害怕产品经理的奇葩需求。
自定义标签就是组件,每个标签代表一个组件,在任何使用Vue的地方都可以直接使用,接下里我们来看看组件的具体用法。
7.1.2 组件用法
回顾一下我们创建Vue实例的方法:

var app=new Vue({
eL:'#app'
})

组件与之类似,余姚注册后才可以使用,注册有全局注册和局部注册两种方式。全局注册后,任何Vue实例都可以使用,全局注册实例代码如下。

Vue.compoent('my-component'{

})

my-component就是注册的组件自定义标签名称,推荐使用小写加减号分割的形式命名。
要在父实例中使用这个组件,必须在实例创建前注册,之后就可以用<my-component></my-component>的形式来使用组件了,在Vue实例之中,使用components选项来注册组件,组件可以嵌套。
Vue的组件模板在某些情况下会受到HTML的限制,比如,<table>内规定只允许是<tr>.<td> <th>这些元素,所以在<table>内使用组件是无效的,这种情况下,可以使用特殊的is属性来来挂载

猜你喜欢

转载自blog.csdn.net/Mrxuchen/article/details/80284423