Vue组件通讯的数据传递方式有哪些？-猿码集

1. Vue组件通讯的重要性

Vue.js 是一个构建用户界面的渐进式框架，尤其注重组件化开发和封装。当一个页面变得越来越复杂时，各个组件之间的通讯就变得越来越重要。组件通讯包括组件之间的父子通讯、兄弟通讯、跨级通讯等等。因此，Vue 组件通讯的实现就显得尤为关键。

2. 通过属性传递数据

2.1 父子组件通讯

父组件可以通过在子组件标签上添加属性来向子组件传递数据。子组件可以在 props 选项中声明自己接收哪些属性以及规定接收到的属性的格式。


// 父组件
<template>
  <div>
    <child :msg="message"></child>
  </div>
</template>
<script>
import Child from './Child.vue';
export default {
  name: 'Parent',
  data() {
    return {
      message: 'hello'
    }
  },
  components: {
    Child
  }
}
</script>
// 子组件
<template>
  <div>
    {{ msg }}
  </div>
</template>
<script>
export default {
  name: 'Child',
  props: {
    msg: {
      type: String,
      default: ''
    }
  }
}
</script>

在上述代码中，父组件在 <child> 标签上添加了一个名为 msg 的属性，并向其传递了字符串 'hello'。子组件在 props 中声明了一个名为 msg 的属性，规定它的类型为 String。

2.2 子父组件通讯

子组件可以通过 this.\$emit(事件名称, 事件内容) 的方式向父组件传递事件和数据。父组件可以在模板中使用 v-on:事件名称或 @事件名称来监听子组件触发的事件。


// 子组件
<template>
  <div>
    <button @click="onClick">点击</button>
  </div>
</template>
<script>
export default {
  name: 'Child',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    onClick() {
      this.count++;
      this.$emit('update:count', this.count);
    }
  },
  props: {
    count: {
      type: Number,
      default: 0
    }
  }
}
</script>
// 父组件
<template>
  <div>
    <child :count="count" @update:count="count = $event"></child>
  </div>
</template>
<script>
import Child from './Child.vue';
export default {
  name: 'Parent',
  data() {
    return {
      count: 0
    }
  },
  components: {
    Child
  }
}
</script>

在上述代码中，子组件中的 onClick 方法通过 this.\$emit 触发了一个名为 'update:count' 的事件，并向父组件传递了一个名为 count 的数据。父组件在 <child> 标签中使用了 count 属性来接收并传递数据，通过 v-on:update:count 或 @update:count 监听子组件触发的事件，获得事件中的数据并更新本组件的 count 数据。

3. 通过 Vuex 进行组件通讯

3.1 什么是 Vuex

Vuex 是一个专门为 Vue.js 设计的状态管理库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态只能按照约定的方式进行修改，从而避免了多个组件之间对同一状态进行复杂的逻辑操作。

3.2 使用 Vuex 进行组件通讯

使用 Vuex 可以非常轻松地在多个组件之间进行数据共享。通过在 state 中声明的全局数据，多个组件可以同时访问和修改这些数据，解决了跨组件通讯的困扰。

下面以一个简单的计数器为例来介绍 Vuex 的使用方法：


// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
    decrement(context) {
      context.commit('decrement');
    }
  }
})
// Counter.vue
<template>
  <div>
    <h2>{{ count }}</h2>
    <button @click="increment">+
    <button @click="decrement">-
  </div>
</template>
<script>
import store from './store';
export default {
  name: 'Counter',
  computed: {
    count() {
      return store.state.count;
    }
  },
  methods: {
    increment() {
      store.dispatch('increment');
    },
    decrement() {
      store.dispatch('decrement');
    }
  }
}
</script>

在上述代码中，首先需要在 store.js 中声明 state、mutations 和 actions。state 中包含计数器的值 count；mutations 中定义计数器的增加和减少操作；actions 中定义对 mutations 的封装。在 Counter.vue 中通过 computed 属性定义一个计算属性 count，它通过 store.state.count 访问全局的计数器值，然后在 methods 中通过 store.dispatch('increment') 和 store.dispatch('decrement') 分别调用 actions 中的增加和减少操作。

4. 通过 $root、$parent、$children 进行组件通讯

4.1 $root

Vue 实例中，$root 指向的是根 Vue 实例，也就是顶层的 Vue 实例。当一个子组件需要向父组件或祖先组件通讯时，可以使用 $root 实例。


// App.vue
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
import Child from './Child.vue';
export default {
  name: 'App',
  components: {
    Child
  },
  methods: {
    callParentMethod() {
      console.log('parent method called!');
    }
  }
}
</script>
// Child.vue
<template>
  <div>
    <button @click="$root.callParentMethod()">调用父组件方法</button>
  </div>
</template>
<script>
export default {
  name: 'Child'
}
</script>

在上述代码中，子组件中通过 $root 访问了根 Vue 实例中的 callParentMethod() 方法，并调用之。

4.2 $parent

在 Vue 实例中，$parent 指向的是父级 Vue 实例。因此，当一个父组件需要向子组件传递数据时可以使用 $children 属性。但是使用 $parent 会导致组件在重构时失效，因此官网建议不要使用 $parent。


// Parent.vue
<template>
  <div>
    <child :parent-msg="message"></child>
  </div>
</template>
<script>
import Child from './Child.vue';
export default {
  name: 'Parent',
  data() {
    return {
      message: 'hello'
    }
  },
  components: {
    Child
  }
}
</script>
// Child.vue
<template>
  <div>
    {{ $parent.message }}
  </div>
</template>
<script>
export default {
  name: 'Child'
}
</script>

在上述代码中，父组件中通过 :parent-msg 的模板语法向子组件传递了父组件中的 message 数据。子组件中通过 $parent.message 访问并输出了这个数据。

4.3 $children

在 Vue 实例中，$children 指向的是当前实例的直接子组件。因此，当一个父组件需要向子组件传递数据时可以使用 $children 属性。但是使用 $children 会导致组件在重构时失效，因此官网建议不要使用 $children。


// Parent.vue
<template>
  <div>
    <child ref="child"></child>
  </div>
</template>
<script>
import Child from './Child.vue';
export default {
  name: 'Parent',
  method: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  },
  components: {
    Child
  }
}
</script>
// Child.vue
<template>
  <div>
    child component
  </div>
</template>
<script>
export default {
  name: 'Child',
  methods: {
    childMethod() {
      console.log('child method called!');
    }
  }
}
</script>

在上述代码中，父组件中通过 ref="child" 把子组件保存到组件的实例中，并通过 this.\$refs.child 访问这个子组件实例。父组件中的 callChildMethod() 方法调用子组件实例的 childMethod() 方法，并输出对应的信息。

5. 总结

Vue.js 是一款非常优秀的前端开发框架，在实现各个组件之间的通讯方面，Vue.js 提供了多种灵活且方便的方式。通过属性传递数据，可以清晰地控制组件之间的数据流向，方便实现单向数据流和状态管理；使用 Vuex 进行状态管理，可以方便实现全局数据共享和状态同步；通过 $root、$parent、$children 进行组件通讯则可以轻松解决多层级组件交互的问题。对于不同场景下，可以选择最适合的方法进行组件通讯。

Vue组件通讯的数据传递方式有哪些？