Vue3父子组件传参通信，轻松搞定！

2023-11-02 06:50:03

Vue3 父子组件传参指南：四种方法详解

前言

在Vue3中，父子组件之间的通信至关重要，以实现复杂、动态的应用程序。本文将深入探讨四种父子组件之间传参的方法，提供代码示例和详细说明，帮助您轻松实现组件间的有效数据交换。

1. 父传子：v-bind

v-bind（也称为双向绑定）是一种将父组件数据传递给子组件的常用方法。在父组件中，使用v-bind将数据绑定到子组件的props（属性），在子组件中使用props接收这些数据。

<!-- 父组件 -->
<template>
  <ChildComponent :name="name" :age="age" />
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      name: 'John',
      age: 30,
    };
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

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

2. 子传父：emit

emit方法用于子组件向父组件传递数据。在子组件中，使用emit触发一个自定义事件，并传递需要传递的数据。在父组件中，使用v-on监听这个自定义事件，从而接收子组件传递的数据。

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('sendData', {
        name: 'John',
        age: 30,
      });
    },
  },
};
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @sendData="handleData" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleData(data) {
      console.log(data); // { name: 'John', age: 30 }
    },
  },
};
</script>

3. 自定义事件

自定义事件是一种更灵活的父子组件通信方式。它允许子组件使用emit触发自定义事件，父组件使用on监听这些事件，从而实现双向通信。

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('sendData', {
        name: 'John',
        age: 30,
      });
    },
  },
};
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @sendData="handleData" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleData(data) {
      console.log(data); // { name: 'John', age: 30 }
      this.$emit('updateData', {
        name: 'Jane',
        age: 31,
      });
    },
    updateData(data) {
      console.log(data); // { name: 'Jane', age: 31 }
    },
  },
};
</script>

4. 使用Vuex

Vuex是一种状态管理库，它可以在父子组件之间共享和通信数据。在Vuex中，您可以在Store中定义全局状态，并在子组件中使用$store访问和修改这些状态。

// store.js
export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

// 子组件
<template>
  <div>
    <button @click="incrementCount">Increment Count</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['incrementCount']),
  },
};
</script>