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.......