剖析 Vue.js 的作用域四级，掌控组件通信之匙

前端

2024-01-12 18:39:49

全局作用域：共享数据的桥梁

全局作用域是 Vue.js 应用程序的根级作用域，它可以在任何组件中访问。全局作用域中的变量被所有组件共享，因此它们非常适合存储应用程序级数据，例如用户设置或应用程序状态。

组件属性：组件的私有数据

组件属性是组件的私有数据，只能在该组件及其子组件中访问。组件属性非常适合存储组件的内部状态，例如表单字段的值或组件的当前状态。

组件方法：组件行为的载体

组件方法是组件的功能，可以被组件及其子组件调用。组件方法非常适合处理用户交互，例如处理表单提交或更新组件状态。

数据绑定：组件通信的纽带

数据绑定是 Vue.js 用于组件之间通信的机制。数据绑定允许组件通过更新组件属性来触发子组件的重新渲染。数据绑定非常适合在组件之间传递数据，例如在父组件和子组件之间传递数据。

综合实例：购物车组件的实现

为了更好地理解 Vue.js 的作用域级别，让我们通过一个购物车组件的实现来深入探讨。

<!-- 父组件 -->
<template>
  <div>
    <button @click="addItem">+</button>
    <cart-item v-for="item in items" :key="item.id" :item="item"></cart-item>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  methods: {
    addItem() {
      this.items.push({ id: 1, name: 'Apple' })
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <li>{{ item.name }}</li>
</template>

<script>
export default {
  props: ['item'],
}
</script>