1. 組件可以有自己的 data 數據
2. 組件的 data 和 實例的 data 有點不一樣,實例中的 data 可以爲一個對象,但是 組件中的 data 必須是一個方法
3. 組件中的 data 除了必須爲一個方法之外,這個方法內部,還必須返回一個對象纔行;
4. 組件中 的data 數據,使用方式,和實例中的 data 使用方式完全一樣!!!
<body>
<div id="app">
<mycom1></mycom1>
</div>
<script>
// 1. 組件可以有自己的 data 數據
// 2. 組件的 data 和 實例的 data 有點不一樣,實例中的 data 可以爲一個對象,但是 組件中的 data 必須是一個方法
// 3. 組件中的 data 除了必須爲一個方法之外,這個方法內部,還必須返回一個對象纔行;
// 4. 組件中 的data 數據,使用方式,和實例中的 data 使用方式完全一樣!!!
Vue.component('mycom1', {
template: '<h1>這是全局組件 --- {{msg}}</h1>',
data: function () {
return {
msg: '這是組件的中data定義的數據'
}
}
})
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {}
});
</script>
</body>
methods屬性的使用
在Vue組件中我們也可以通過methods屬性來定義組件自身的方法來供組件使用，和Vue實例中的methods的使用差不多，如下。
<body>
<div id="app">
<mycom1></mycom1>
</div>
<script>
Vue.component('mycom1', {
template: '<h1>這是全局組件 --- {{msg}}<input type="button" value="調用組件中的show方法" @click="show"></h1>',
data: function () {
return {
msg: '這是組件的中data定義的數據'
};
},
methods:{
show(){//組件內部定義的show方法
console.log('我是組件中是show方法...');
}
}
})
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods:{}
});
</script>
</body>
效果：（這個按鈕必須放在組件中間）
data屬性必須返回對象
在這裏大家需要搞 組件 和 Vue實例的區別，Vue實例是在頁面加載的時候被實例化的，一個頁面就一個，而 組件是可以複用的.也就是在一個頁面中可以同一個組件可以有多個實例。如下案例
<body>
<div id="app">
<!--複用3個 Vue 組件-->
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
</div>
<template id="tmpl">
<div>
<input type="button" value="加1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
<script>
// 聲明的全局對象
var dataObj = { count: 0 }
// 這是一個計數器的組件, 身上有個按鈕,每當點擊按鈕,讓 data 中的 count 值 +1
Vue.component('counter', {
template: '#tmpl',
data: function () {
return dataObj
//return { count: 0 }
},
methods: {
increment() {
this.count++
}
}
})
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
複用3個組件，效果：
修改：
效果：
game over.......