什么是组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
使用组件
注册
注册一个全局组件，你可以使用 Vue.component(tagName, options)
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src='https://unpkg.com/vue'></script>
</head>
<body>
<div id="example">
<my-component></my-component>
</div>
</body>
<script>
// 注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
el: '#example'
})
</script>
</html>
运行结果：
<div id="example">
<div>A custom component!</div>
</div>
局部注册
不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：
<div id="example-2">
<child-component></child-component>
</div>
<script>
var Child = {
template: '<div>A child component!</div>'
}
new Vue({
el: '#example-2',
components: {
'child-component': Child
}
})
</script>
运行结果：
<div id="example-2">
<div>A child component!</div>
</div>
如果把 child-component 只能用example-2中，不能放到其他的div中，如果把放到其他的div中就会报错。
<div id="example">
<my-component></my-component>
<child-component></child-component>
</div>
网友评论