从入门到精通：Vue.js 3 父子组件通信指南

2024-02-03 05:26:10

当然，满足要求，下面是你要的内容：

大家好！今天，我们来探讨一下 Vue.js 3 中父子组件通信的艺术。在 Vue.js 中，父子组件通信是实现组件之间数据和事件传递的关键。通过父子组件通信，我们可以构建出更加复杂、交互性更强的 Vue.js 应用。

1. props：传递数据从父组件到子组件

props 是最简单、最直接的父子组件通信方式。它允许父组件向子组件传递数据。子组件可以通过 props 接收父组件传递的数据，并在其模板中使用这些数据。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

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

在父组件中，我们可以这样使用子组件：

<template>
  <div>
    <child-component message="Hello, Vue.js 3!"></child-component>
  </div>
</template>

2. emit：从子组件向父组件发送事件

emit 是与 props 相对应的父子组件通信方式。它允许子组件向父组件发送事件。父组件可以通过监听子组件发出的事件，并在其模板中处理这些事件。

<template>
  <div>
    <button @click="handleClick">Send message</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', 'Hello, Vue.js 3!')
    }
  }
}
</script>

在父组件中，我们可以这样监听子组件发出的事件：

<template>
  <div>
    <child-component @message="handleMessage"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  }
}
</script>

3. Vuex：全局状态管理

Vuex 是一个状态管理库，它可以帮助我们管理 Vue.js 应用中的全局状态。通过 Vuex，我们可以将多个组件共享的数据存储在一个中心化的存储库中。这使得我们可以轻松地访问和修改这些数据，而无需在组件之间传递 props 和 emit 事件。

// store.js
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store

在组件中，我们可以这样使用 Vuex：

<template>
  <div>
    <button @click="incrementCount">Increment count</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['incrementCount'])
  }
}
</script>

4. provide/inject：跨组件数据传递

provide/inject 是 Vue.js 3 中引入的一种新的父子组件通信方式。它允许父组件向其所有子组件提供数据，而无需在组件之间传递 props 和 emit 事件。

// 父组件
<template>
  <div>
    <provide>
      <div>
        <h1>Hello, Vue.js 3!</h1>
      </div>
    </provide>
  </div>
</template>

// 子组件
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

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