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

第十九章 Vue组件之data函数

article 2024/11/5 16:34:02

一、引言

二、示例代码

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 = false

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