当前位置：首页 > news >正文

第十九章 Vue组件之data函数

news 2025/7/10 0:14:15

一、引言

二、示例代码

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>