<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對象