组件名大小写
定义组件名的方式有两种：
使用 kebab-case
Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
全局注册
全局组件[要注册一个全局组件，可以使用 Vue.component(tagName, options)]【注意点：组件在注册之后，便可以作为【自定义元素】在一个实例的模板中使用，确保在初始化根实例之前注册组件。】
Vue.component('my-component-name', {
// ... 选项 ...
})
局部注册
局部组件[注意点：注册仅在其作用域中可用的组件]
在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
然后在 components 选项中定义你想要使用的组件：
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。
注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}
或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}
关于全局组件和局部组件的具体实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app1">
<h4>全局组件</h4>
<my-global></my-global>
</div>
<p></p>
<hr>
<p></p>
<div id="app2">
<h4>局部组件</h4>
<local-global></local-global>
</div>
<script src="js/vue.js"></script>
<script>
// 先注册全局组件
Vue.component('my-global',{
template: '<div>{{msg}}</div>',
data () {
return {
msg: 'A global component'
}
}
});
// 再初始化
var app1 = new Vue({
el: '#app1'
});
var child = {
template: '<div>a local component</div>'
};
var app2 = new Vue({
el: '#app2',
data: {
},
components: {
// 局部组件
'local-global': child
}
});
</script>
</body>
</html>
在模块系统中局部注册
创建一个 components 目录，并将每个组件放置在其各自的文件中。然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中，现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
网友评论