vue 传参方式

Vue.js 是一种流行的 JavaScript 框架，它允许开发人员使用组件来构建交互式 Web 应用程序。在 Vue.js 中，组件是一个抽象概念，可以将 UI 拆分成独立且可复用的部分。在组件之间传递数据是非常常见的需求，在这篇文章中我们来探讨一下 Vue.js 中常用的传参方式。

父子组件通信

父子组件通信是 Vue.js 中最常见的传参方式之一。在父组件中通过 props 属性向子组件传递数据。子组件可以通过 props 属性接收父组件传递过来的参数。

父组件传递 props

html复制代码
<!-- Parent.vue -->
<template>
  <Child :name="name" :age="age" />
</template>

<script>
import Child from './Child.vue';

export default {
  name: 'Parent',
  data() {
    return {
      name: 'Tom',
      age: 20,
    };
  },
  components: {
    Child,
  },
};
</script>

在上述例子中，我们使用 v-bind 或者简写方式 : 将 name 和 age 两个变量绑定到子组件上。

子组件接收 props

html复制代码
<!-- Child.vue -->
<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['name', 'age'],
};
</script>

在子组件中，我们只需要通过 props 属性声明要接收的参数即可。这样父组件传递过来的数据就可以在子组件中使用了。

兄弟组件通信

在 Vue.js 中，兄弟组件之间通信相对来说比较麻烦。一般情况下，我们需要使用一个公共的状态管理器来实现兄弟组件之间的数据传递。

使用 Vuex 状态管理器

Vuex 是 Vue.js 官方提供的状态管理库，它可以让我们轻松地管理应用程序的状态。在 Vue.js 应用程序中，我们可以使用 Vuex 来存储和共享数据，以实现兄弟组件之间的通信。

html复制代码
<!-- Sibling1.vue -->
<template>
  <div>
    <p>Value: {{ value }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'Sibling1',
  computed: {
    ...mapState(['value']),
  },
  methods: {
    ...mapActions(['increment']),
  },
};
</script>

在上述例子中，我们使用了 mapState 和 mapActions 两个函数来简化对 Vuex 状态管理器的调用。通过 mapState 我们可以将 value 属性映射到组件的计算属性中，而 mapActions 则允许我们将 increment 方法映射到组件的方法中。

html复制代码
<!-- Sibling2.vue -->
<template>
  <div>
    <p>Value: {{ value }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'Sibling2',
  computed: {
    ...mapState(['value']),
  },
};
</script>

在另一个兄弟组件中，我们同样可以使用 mapState 函数将 value 属性映射到计算属性中。