组件化开发 需要使用到组件, 围绕组件, Vue 提供了一系列功能方法, 这里仅记录组件的 最简单 的使用方法.
1. 通过 Vue.component(tagName, options) 注册一个 全局组件, 这个组件可以在不同的 Vue 实例 中使用.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app1">
<sayhello></sayhello>
</div>
<hr/>
<div id="app2">
<sayhello></sayhello>
</div>
<script>
// 全局组件, 注意组件名必须小写
Vue.component("sayhello", {
template: "<h2>Hello</h2>"
})
// Vue 实例1
var vApp1 = new Vue({
el: "#app1"
})
// Vue 实例2
var vApp2 = new Vue({
el: "#app2"
})
</script>
</body>
</html>
2. 局部组件 在 Vue 实例中注册(声明), 它只能在当前 Vue 实例中使用, 因此成为 局部组件, 注意这里是 components , 而非 component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<sayhello></sayhello>
</div>
<script>
// Vue 实例
var vApp = new Vue({
el: "#app",
// 注意这里是: componets, 而不是: component
components: {
sayhello: {
template: "<strong>Hello</strong>"
}
}
})
</script>
</body>
</html>
