第十九章 Vue组件之data函数

目录

一、引言

二、示例代码 

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函数创建了独立的数据对象：