vue方法传对象

前言

在Vue.js中，我们可以通过方法来进行组件间的通信和数据传递。传递对象作为参数是一种常见的需求。本文将介绍如何在Vue.js中传递对象作为方法参数，并提供一些示例代码和解释。

方法传递对象的示例代码

// 父组件
<template>
  <div>
    <button @click="sendObject">发送对象</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendObject() {
      const obj = {
        name: '张三',
        age: 20
      };
      this.$emit('object-event', obj);
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <p>接收到的对象：{{ receivedObject }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedObject: null
    };
  },
  mounted() {
    this.$parent.$on('object-event', (obj) => {
      this.receivedObject = obj;
    });
  }
};
</script>

代码解释

示例中我们有一个父组件和一个子组件。父组件包含一个按钮，当点击按钮时，会发送一个带有对象参数的自定义事件。子组件监听该事件，并将接收到的对象保存在本地数据中，以进行显示。

在父组件中，我们使用$emit方法来触发自定义事件object-event，并将对象obj作为参数传递。在子组件中，我们使用$on方法来监听object-event事件，并在回调函数中接收传递的对象参数，然后将其保存在receivedObject属性中。

总结

通过以上示例，我们学习了如何在Vue.js中传递对象作为方法参数。在父组件中使用$emit触发自定义事件，并在子组件中使用$on监听该事件，从而实现对象的传递和接收。这种方法可以帮助我们实现组件间的数据传递和通信。