返回

Vue组件间数据传递八大招，轻松搞定父传子、子传父、兄弟互传

前端

组件间的数据传递：在 Vue.js 中构建复杂应用程序的关键

在 Vue.js 应用程序中，组件是应用程序的基本构建块。组件之间的数据传递是创建复杂且交互式的用户界面的关键。Vue 提供了多种方式来实现组件间的数据传递，每种方式都有其独特的优点和缺点。在本文中，我们将深入探讨 Vue 中组件间数据传递的 8 种方法，并提供有关何时使用它们的指导。

1. Props

Props是最简单、最常用的组件间数据传递方法。它允许父组件通过 props 属性向子组件传递数据，子组件通过 props 接收数据。Props 是单向数据流，这意味着子组件无法修改父组件传递的数据。

<!-- 父组件 -->
<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

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

2. $emit

$emit 是子组件向父组件传递数据的事件。子组件通过 $emit 方法触发事件，父组件通过 v-on 指令监听该事件并处理数据。$emit 也是单向数据流，这意味着父组件无法通过 $emit 向子组件传递数据。

<!-- 子组件 -->
<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click', 'Hello World!')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component @click="handleChildClick"></child-component>
</template>

<script>
export default {
  methods: {
    handleChildClick(message) {
      console.log(message) // Hello World!
    }
  }
}
</script>

3. Ref

Ref 是 Vue 提供的一种获取组件实例引用的方式。父组件可以通过 ref 属性获取子组件的实例，然后通过子组件的实例直接访问子组件的数据和方法。Ref 是双向数据流，这意味着父组件和子组件都可以通过 ref 互相访问对方的数据和方法。

<!-- 父组件 -->
<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.child.message) // Hello World!
    this.$refs.child.handleClick() // 子组件的方法
  }
}
</script>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    handleClick() {
      console.log('子组件的方法被调用了')
    }
  }
}
</script>

4. Provide/Inject

Provide/Inject 是一种依赖注入方式，它允许组件在不直接引用子组件的情况下访问子组件的数据和方法。父组件通过 provide 方法提供数据和方法，子组件通过 inject 方法注入这些数据和方法。Provide/Inject 是双向数据流，这意味着父组件和子组件都可以通过 Provide/Inject 互相访问对方的数据和方法。

<!-- 父组件 -->
<template>
  <provide>
    <child-component></child-component>
  </provide>
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  inject: ['message']
}
</script>

5. EventBus

EventBus 是一种事件总线，它允许组件之间进行通信。组件可以通过 EventBus 发布事件，其他组件可以通过 EventBus 订阅这些事件并处理数据。EventBus 是全局的，这意味着任何组件都可以发布和订阅事件。

// 创建 EventBus 实例
const eventBus = new Vue()

// 发布事件
eventBus.$emit('click', 'Hello World!')

// 订阅事件
eventBus.$on('click', (message) => {
  console.log(message) // Hello World!
})

6. attrs/listeners

$attrs 和 $listeners 是两个特殊的 props，它们可以将父组件的属性和事件传递给子组件。$attrs 包含父组件的所有属性，但不包含 props。$listeners 包含父组件的所有事件监听器。$attrs 和 $listeners 是只读的，这意味着子组件不能修改父组件的属性和事件监听器。

<!-- 父组件 -->
<template>
  <child-component :message="message" @click="handleClick"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    handleClick() {
      console.log('父组件的方法被调用了')
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
  <button @click="$listeners.click">Click me</button>
</template>

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

7. Vue 自定义事件

Vue 自定义事件允许组件之间传递自定义事件。父组件可以通过 $emit 方法触发自定义事件，子组件通过 v-on 指令监听该事件并处理数据。Vue 自定义事件是单向数据流，这意味着子组件不能通过 vue 自定义事件向父组件传递数据。

<!-- 父组件 -->
<template>
  <child-component @custom-event="handleCustomEvent"></child-component>
</template>

<script>
export default {
  methods: {
    handleCustomEvent(message) {
      console.log(message) // Hello World!
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', 'Hello World!')
    }
  }
}
</script>

8. Vuex

Vuex 是一个状态管理库，它允许组件共享状态。Vuex 可以存储全局状态，并允许组件通过 getters 和 mutations 访问和修改状态。Vuex 是双向数据流，这意味着组件可以读取和修改 Vuex 中的状态。

// 创建 Vuex 实例
const store = new Vuex.Store({
  state: {
    message: 'Hello World!'
  },
  getters: {
    getMessage: (state) => {
      return state.message
    }
  },
  mutations: {
    setMessage: (state, message) => {
      state.message = message
    }
  }
})

// 父组件
<template>
  <child-component></child-component>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.getters.getMessage
    }
  }
}
</script>

// 子组件
<template>
  <p>{{ message }}</p>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$store.commit('setMessage', 'Hello Vuex!')
    }
  }
}
</script>

总结

Vue 提供了多种组件间数据传递方法，每种方法都有其独特的优缺点。在选择使用哪种方法时，考虑以下因素：

  • 数据流的方向（单向或双向）
  • 是否需要访问父组件或子组件实例
  • 通信的复杂性和规模

常见问题解答

  1. 哪种数据传递方法最常见？
    最常见的数据传递方法是 Props。它简单易用，适用于大多数场景。

  2. 何时使用 Provide/Inject？
    当需要在组件层次结构中共享数据时，使用 Provide/Inject。它允许组件在不直接引用彼此的情况下访问对方的数据和方法。

  3. 何时使用 EventBus？
    当组件之间需要进行全局通信时，使用 EventBus。它允许任何组件发布和订阅事件，从而实现松散耦合的通信。

  4. **Vuex 和