目录
一、引言
二、示例代码
2.1. 工程结构图
2.2. main.js
2.3. App.vue
2.4. BaseCount.vue
三、运行效果
一、引言
在Vue CLI脚手架中一个组件的data选项必须是一个函数,以此保证每个组件实例,维护独立的一份数据对象。每次创建新的组件实例,都会新执行一次data 函数,得到一个新对象。对于Java后端开发的同学相信一定很熟悉,这就是面向对象的概念。data函数的使用与我们前面章节讲到的data对象的使用方法是一样的。
二、示例代码
2.1. 工程结构图
2.2. main.js
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
2.3. App.vue
<template><div class="App"><BaseCount></BaseCount><BaseCount></BaseCount><BaseCount></BaseCount></div>
</template><script>
import BaseCount from './components/BaseCount.vue'
export default {components: {BaseCount}
}
</script><style>
.base-count {margin: 20px;
}
</style>
2.4. BaseCount.vue
<template><div class="base-count"><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>
</template><script>
export default {// data必须是一个函数,以此保证每个组件实例维护独立的一个数据对象data () {console.log('调用data函数创建新的一个数据实例对象')return {count: 1314}}
}
</script><style>
</style>
三、运行效果
我们可以看到,控制面板输出了三次日志,即App.vue中的三个BaseCount.vue组件分别通过data函数创建了独立的数据对象: