Vue 组件间通信 6 种方式
在 Vue 框架中，组件之间的通信是非常重要的，因为它可以让不同的组件之间共享数据和功能。下面，我们将讨论 Vue 组件间通信的 6 种方式。
1. Props
Props 是 Vue 中最基本的组件间通信方式。它允许父组件将数据传递给子组件。父组件可以使用 v-bind 指令将数据绑定到子组件的 props 上，子组件可以使用 props 对象来接收数据。
例如，在上面的代码中，我们定义了一个 App 组件，它包含一个 Users 组件。我们使用 v-bind 指令将 users 数据绑定到 Users 组件的 props 上。
```html
<!-- App.vue -->
<template>
<div id="app">
<users v-bind:users="users"></users>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
users: ["Henry", "Bucky", "Emily"]
}
},
components: {
"users": Users
}
}
</script>
<!-- Users.vue -->
<template>
<div class="hello">
<ul>
<li v-for="user in users">{{user}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
users: {
type: Array,
required: true
}
}
}
</script>
```
2. $emit / $on
$emit 和 $on 是 Vue 提供的组件间通信方式。$emit 可以触发事件，而 $on 可以监听事件。
例如，在上面的代码中，我们定义了一个 AppHeader 组件，它包含一个点击事件。当点击事件触发时，它会使用 $emit 触发 titleChanged 事件。然后，我们在 App 组件中使用 v-on 指令监听 titleChanged 事件。
```html
<!-- AppHeader.vue -->
<template>
<header>
<h1 @click="changeTitle">{{title}}</h1>
</header>
</template>
<script>
export default {
name: 'app-header',
data() {
return {
title: "Vue.js Demo"
}
},
methods: {
changeTitle() {
this.$emit("titleChanged", "�������");
}
}
}
</script>
<!-- App.vue -->
<template>
<div id="app">
<app-header v-on:titleChanged="updateTitle" ></app-header>
<h2>{{title}}</h2>
</div>
</template>
<script>
import Header from "./components/Header"
export default {
name: 'App',
data() {
return {
title: "Vue.js Demo"
}
},
methods: {
updateTitle(event) {
this.title = event;
}
},
components: {
"app-header": Header
}
}
</script>
```
3. Vuex
Vuex 是 Vue 的状态管理工具。它可以帮助我们管理应用程序的状态，并使得组件之间的通信更加方便。
例如，我们可以使用 Vuex 来管理应用程序的用户列表状态。
```javascript
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
users: ["Henry", "Bucky", "Emily"]
},
mutations: {
addUser(state, user) {
state.users.push(user);
}
}
})
```
然后，我们可以在组件中使用 Vuex 来访问和修改状态。
```html
<!-- App.vue -->
<template>
<div id="app">
<users :users="users"></users>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'App',
computed: {
...mapState({
users: state => state.users
})
}
}
</script>
```
4. $parent / $children
$parent 和 $children 是 Vue 提供的组件间通信方式。$parent 可以访问父组件，而 $children 可以访问子组件。
例如，我们可以使用 $parent 来访问父组件的数据。
```html
<!-- Child.vue -->
<template>
<div>
{{ $parent.msg }}
</div>
</template>
<script>
export default {
name: 'Child'
}
</script>
<!-- Parent.vue -->
<template>
<div>
<child></child>
</div>
</template>
<script>
export default {
name: 'Parent',
data() {
return {
msg: "Hello, World!"
}
}
}
</script>
```
5. $attrs / $listeners
$attrs 和 $listeners 是 Vue 提供的组件间通信方式。$attrs 可以访问父组件传递的属性，而 $listeners 可以访问父组件传递的事件监听器。
例如，我们可以使用 $attrs 来访问父组件传递的属性。
```html
<!-- Child.vue -->
<template>
<div>
{{ $attrs.title }}
</div>
</template>
<script>
export default {
name: 'Child'
}
</script>
<!-- Parent.vue -->
<template>
<div>
<child title="Hello, World!"></child>
</div>
</template>
<script>
export default {
name: 'Parent'
}
</script>
```
6. Provide/Inject
Provide/Inject 是 Vue 提供的组件间通信方式。它可以让父组件提供数据，而子组件可以 inject 来访问这些数据。
例如，我们可以使用 Provide/Inject 来共享数据。
```html
<!-- GrandParent.vue -->
<template>
<div>
<parent></parent>
</div>
</template>
<script>
export default {
name: 'GrandParent',
provide: {
msg: "Hello, World!"
}
}
</script>
<!-- Parent.vue -->
<template>
<div>
<child></child>
</div>
</template>
<script>
export default {
name: 'Parent'
}
</script>
<!-- Child.vue -->
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default {
name: 'Child',
inject: ['msg']
}
</script>
```
Vue 提供了多种组件间通信方式，我们可以根据实际情况选择合适的方式来实现组件之间的通信。
评论0