刚开始学习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相同。最好是用- 将名字连接起来。

Logo

前往低代码交流专区

更多推荐