组件是Vue的最核心的功能,在前端应用程序中可以采用模块化的开发,实现课重用、可扩攒。组件就是一个带有名字的可服用的Vue实例,因此在Vue实例中的各个选项也可以在组件中使用,唯一例外的是el选项。接下来我们具体去了解一下组件
组件的注册
组件的注册分两种形式,一种全局注册一种局部注册。
全局注册
在Vue中只能通过Vue.component来创建全局组件
<div id="app">
<input-button></input-button>
</div>
<script>
//注册全局组件
Vue.component('InputButton', {
data: function() {
return {
num: 1
};
},
methods: {
ck() {
this.num++;
console.log(this.num);
}
},
template: '<input type="button" @click="ck" value="点击一下" name="click"/>'
})
let vm = new Vue({
el: "#app"
})
</script>
我们通过全局注册的方式注册了一个新组件, 第一个参数表示组件名 ,第二个参数表示一个函数对象。
组件有两种命名方式,第一种 kebab-case (短横线分隔命名) ,这种方式命名在使用的时候只能通过kebab-case形式使用;第二种 PascalCase (首字母大写命名) ,这种方式在使用的时候两种命名法都可以使用,但是在页面上只能只用kebab-case形式。
函数对象除了上述案例中的写法,还也可以使用Vue.extend()方法,而且通过全局注册方式注册的组件可以在其他组件中使用。
<div id="app">
<input-button></input-button>
<input-button2></input-button2>
</div>
<script>
//Vue.extend()和嵌套使用
Vue.component('InputButton', {
data: function() {
return {
num: 0
};
},
methods: {
ck() {
this.num++;
console.log(this.num);
}
},
template: '<input type="button" value="点击一下" @click="ck"/>'
})
let MyCompoent = Vue.extend({
template: '<input-button></input-button>'
})
Vue.component('input-button2', MyCompoent)
let vm = new Vue({
el: "#app"
})
</script>
上述案例中,第二个组件的注册我们使用了kebab-case命名方式和直接使用第一个组件
局部注册
局部组件是在Vue实例的选项对象中使用components选项来注册。
<div id="app">
<input-button></input-button>
</div>
<script>
let vm = new Vue({
el: "#app",
components: {
InputButton: {
data: function() {
return {
num: 0
}
},
methods: {
ck() {
this.num++;
console.log(this.num);
}
},
template: '<input type="button" value="点击一下" @click="ck"/>'
}
}
})
</script>
我们通过局部注册的方式注册了一个组件,以局部注册方式注册的组件命名方式和全局注册相同,而且也可以通过Vue.extend()方法去构造组件的函数对象。局部注册的组件只能在父组件的模板中使用,不能在全局使用。