父组件向子组件传值：父组件通过属性向下传值的方式和子组件通信；
使用步骤：
定义组件：现有自定义组件com-a、com-b，com-a是com-b的父组件；
准备获取数据：com-b要获取父组件data中的name属性；
在<com name=“name”></com> 使用v-bind 绑定name属性，红色部分为属性名称，可以随意写。
在子组件定义部分里添加选项，值是个字符串数组 props:[‘name’]，将上边红色的属性名称写在这里；
之后就可定义在子组件中使用name属性了；
好了，接着本文的重点内容。
写vue，如果页面涉及到多个组件，就会涉及组件之间的通信，可能是父子
Vue.js 是一款流行的前端框架，它的核心特性之一就是组件化。在 Vue 应用中，组件间的通信是非常常见且重要的。本篇文章将详细介绍 Vue 组件间通信，特别是子组件向父组件传递值的方式。
我们要理解 Vue 中的组件通信基本规则。父组件通常通过属性（props）向下传递数据给子组件，而子组件向父组件传递数据则通常通过事件（events）。这是 Vue 推荐的单向数据流策略，确保数据流动的方向清晰，有利于维护和调试。
### 1. 子组件通过 `this.$emit()` 传递值给父组件
子组件通过调用 `this.$emit(eventName, data)` 触发一个自定义事件，父组件可以通过在模板中使用 `@eventName="handler"` 的方式监听并处理这个事件。下面是一个示例：
```html
<!-- 父组件 -->
<template>
<div>
<child @send-msg="handleMsg"></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: { Child },
methods: {
handleMsg(msg) {
console.log('接收到子组件的消息:', msg)
}
}
}
</script>
```
```html
<!-- 子组件 -->
<template>
<button @click="sendMsg">发送消息给父组件</button>
</template>
<script>
export default {
methods: {
sendMsg() {
this.$emit('send-msg', '这是子组件的消息')
}
}
}
</script>
```
### 2. 使用 Vuex 进行组件间通信
Vuex 是 Vue 的状态管理库，它提供了一个全局的 store，所有组件都能访问。在 Vuex 中，你可以定义 mutations 和 actions 来修改和触发数据变化。组件通过 dispatching actions 来改变 state，然后其他组件可以通过 computed properties 或者 getters 获取这些状态。
```javascript
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
userInfo: {}
},
mutations: {
updateUserInfo(state, payload) {
state.userInfo = payload
}
},
actions: {
fetchUserInfo({ commit }, q_userInfo_form) {
// 假设这是一个异步操作，获取用户信息
// commit('updateUserInfo', 用户信息)
}
},
getters: {
userInfo: state => state.userInfo
}
})
```
```javascript
// 组件A
computed: {
...mapState(['userInfo'])
},
methods: {
findUserInfoList(q_userInfo_form) {
this.$store.dispatch('fetchUserInfo', q_userInfo_form)
}
}
```
```javascript
// 组件B
computed: {
...mapGetters(['userInfo'])
}
```
### 3. 中央总线（Event Bus）
对于一些简单场景或非父子组件间的通信，不使用 Vuex 的话，可以创建一个全局的 Vue 实例作为事件总线（Event Bus）。
```javascript
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
```
在子组件中触发事件：
```javascript
// 子组件
import { EventBus } from './eventBus.js'
export default {
methods: {
sendMessage() {
EventBus.$emit('child-message', '这是子组件的消息')
}
}
}
```
在父组件或其他组件中监听并接收事件：
```javascript
// 父组件或其他组件
import { EventBus } from './eventBus.js'
export default {
created() {
EventBus.$on('child-message', this.handleChildMessage)
},
beforeDestroy() {
EventBus.$off('child-message', this.handleChildMessage)
},
methods: {
handleChildMessage(msg) {
console.log('接收到子组件的消息:', msg)
}
}
}
```
此外，还有其他方法，如通过修改父组件传入对象的属性或使用 `ref` 调用子组件的方法来获取子组件数据，但这些在某些情况下可能会导致代码难以维护。因此，推荐使用 `this.$emit()` 或者 Vuex 来进行组件间通信，尤其在大型应用中。
Vue.js 提供了多种组件间通信的方式，选择哪种方式取决于应用场景和项目的复杂度。理解并灵活运用这些通信机制是成为 Vue 开发专家的关键。
- 1
- 2
前往页