Vue.js的组件(一)全局组件和局部组件
刚开始学习Vue.js,记录下心得。所谓组件,在我看来,就相当于新建一个属于自己的标签。但是这个标签的功能很强大,可以有很多特殊的功能。组件可以全局声明:/*js*/Vue.component('my-component-button1',{template:'<button>myFirstComponent</button>'});var app1 = new Vue(
·
刚开始学习Vue.js,记录下心得。
所谓组件,在我看来,就相当于新建一个属于自己的标签。但是这个标签的功能很强大,可以有很多特殊的功能。
组件可以全局声明:
/*js*/
Vue.component('my-component-button1',{
template:'<button>myFirstComponent</button>'
});
var app1 = new Vue(
el:'#app1' //绑定DOM元素
);
当然也可以局部声明,局部声明的话,就只能让注册了这个组件的Vue的实例使用。比如下面的app2.
/*js*/
var localComponent = {
template:'<button>myFirstLocalComponent</button>'
}
var app2 = new Vue({
el:'#app2' //绑定DOM元素
//注意↓有s
components:{
'my-component-button2':localComponent
}
})
//html
//第一个全局按钮组件
<div id="app1">
<my-component-button1></my-component-button1>
</div>
//第一个局部按钮组件,只能让app2用,因为只用app2注册了.
<div id="app2">
<my-component-button2></my-component-button2>
</div>
这两个组件分别被Vue.js渲染为:
<div id="app1">
<button>myFirstComponent</button>
</div>
<div id="app2">
<button>myFirstLocalComponent</button>
</div>
需要注意的是,模板的名字不要有驼峰,不要和已有的标签比如h1相同。最好是用-
将名字连接起来。
更多推荐
已为社区贡献4条内容
所有评论(0)