<div id="app">
<cpn></cpn>
<cpn></cpn>
</div>
<script src="../js/vue.js">
</script>
<!-- 模版 -->
<template id="cpn">
<div>
<h1>{{title}}</h1>
<p>正文</p>
</div>
</template>
<script>
Vue.component('cpn',{ //注册全局组件
template: "#cpn",
data(){
return {
title: "标题"
}
}
})
const app = new Vue({
el: '#app',
data: {
message: 'hello'
}
})
</script>
为什么组件的data必须是函数
当创建多个组件实例时,每个组件的data为函数即时return的新对象
这样避免多个组件共享一个data对象