全局组件
<body>
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
<script>
// 定义全局组件，两个参数：1，组件名称。2，组件参数
Vue.component("counter", {
template: '<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button > ',
data() {
return {
count: 0
}
}
})
var app = new Vue({
el: '#app',
})
</script>
</body>
局部组件
<body>
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
<script>
const counter = {
template: '<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
data() {
return {
count: 0
}
}
};
let app = new Vue({
el: "#app",
components: {
//counter: counter // 将定义的对象注册为组件
counter // 将定义的对象注册为组件
}
})
</script>
</body>