vue有两种组件的注册类型:全局注册和局部注册。
注册组件时传入的配置和创建Vue实例差不多,但也有不同,其中一个就是data属性必须是一个函数。
注:组件命名可以用使用 kebab-case(my-component)形式和ascalCase(MyComponent)形式,但直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。所以最好还是用kebab-case形式的。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<global-component></global-component>
<partial-component></partial-component>
</div>
<script>
Vue.component('global-component', {
template: `<div>这是一个全局自定义组件</div>`
})
let app = new Vue({
el: '#app',
components: {
'partial-component': {
template: `<div>这是一个局部的自定义组件,只能在当前Vue实例中使用</div>`,
}
}
});
</script>
</body>
</html>