1、組件中數據的存放
***（重點）組件是一個單獨模塊的封裝：這個模塊有自己的HTML模板，也有data屬性。
只是這個data屬性必需是一個函數，而這個函數返回一個對象，這個對象里面存放着組件的數據。
<template id="MyCpn">
<div>
<h2>組件數據的存放 </h2>
<p>{{title}}</p>
</div>
</template>
<script>
Vue.component('cpn', {
template: '#MyCpn',
data() {
return {
title: '我是組件中的專屬數據'
}
}
// 組件是一個單獨模塊的封裝：這個模塊有自己的HTML模板，也有data數據。
})
***完整代碼***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<cpn></cpn>
</div>
<body>
<template id="MyCpn">
<div>
<h2>組件數據的存放 </h2>
<p>{{title}}</p>
</div>
</template>
<script>
Vue.component('cpn', {
template: '#MyCpn',
data() {
return {
title: '我是組件中的專屬數據'
}
}
// 組件是一個單獨模塊的封裝：這個模塊有自己的HTML模板，也有data數據。
})
let vm = new Vue({
el: '#app',
data: () => ({
title: "我是頂層Vue實例中的數據，外部組件能訪問我的數據嗎？"
})
})
</script>
</body>
</html>
解析：當你在調用title變量的時候，只能訪問到組件內部定義的變量，因為組件是一個單獨模塊的封裝。
2、為什么組件中的data必需是函數
因為組件是要重復使用的，當data是函數並且在多次調用的時候，所占的內存塊不一樣，所以data中的數據互不影響。
****完整代碼****
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<body>
<template id="MyCpn">
<div>
<h2>當前計數:{{content}}</h2>
<button @click="res">-</button>
<button @click="add">+</button>
</div>
</template>
<script>
Vue.component('cpn', {
template: '#MyCpn',
data() {
return {
content: 0
}
},
methods: {
add() {
this.content++
},
res() {
this.content--
}
}
})
let vm = new Vue({
el: '#app',
data: () => ({
title: "我是頂層Vue實例中的數據，外部組件能訪問我的數據嗎？"
})
})
</script>
</body>
</html>
反過來，如果data不是用函數的話，在多次調用組件的時候，這里面的數據相互影響
***完整代碼****
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<body>
<template id="MyCpn">
<div>
<h2>當前計數:{{counter}}</h2>
<button @click="res">-</button>
<button @click="add">+</button>
</div>
</template>
<script>
const obj = {
counter: 0
}
Vue.component('cpn', {
template: '#MyCpn',
data() {
return obj
},
methods: {
add() {
this.counter++
},
res() {
this.counter--
}
}
})
let vm = new Vue({
el: '#app',
data: () => ({
title: "我是頂層Vue實例中的數據，外部組件能訪問我的數據嗎？"
})
})
</script>
</body>
</html>
