组件数据与方法

组件的数据和方法定义了组件的状态和行为。

data 必须是函数

JavaScript

export default {
  data() {
    return {
      count: 0
    }
  }
}

组件的 data 必须是函数形式，不能是对象。

原因

如果 data 是对象，多个组件实例会共享同一份数据：

JavaScript

// 错误：共享数据
const data = { count: 0 }
app.component('counter', { data })

// 正确：每个实例独立
app.component('counter', {
  data() {
    return { count: 0 }
  }
})

方法

JavaScript

export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
}

方法在模板中可直接调用：

HTML

<button @click="increment">+1</button>

访问数据和方

在组件内部使用 this 访问：

JavaScript

methods: {
  showData() {
    console.log(this.count)
  }
}

要点总结

组件的 data 必须是返回对象的函数
函数形式确保每个实例数据独立
方法定义在 methods 选项中
使用 this 访问组件的数据和方法