前言
今天学习了vue组件的使用。组件是可复用的 Vue 实例,且带有一个名字。组件的使用,是跟标签一模一样的,可以把组件理解成是自定义的标签元素。
提示:以下是本篇文章正文内容,下面案例可供参考
一、全局组件
注册:
Vue.component('my-component-name', { /* ... */ })
Vue.component(组件ID,选项对象)
组件只能在实例化的vue对象中进行使用
二、局部组件
注册:
定义一个名为button-counter 的新组件,并局部注册。
1、通过一个普通的 JavaScript 对象来定义组件
var Component = {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">Clicked {{ count }} times.</button>'
}
2、注册组件,在使用Component的components 选项中注册想要使用的组件:
var Component1 = {
components: {
' button-counter': Component //组件名称:选项对象
},
// ...
}