Vue2父子组件传值举例详解

在Vue2中，父子组件之间的数据传递是非常常见的需求。本攻略将详细讲解Vue2中父子组件传值的方法，并提供两个示例说明。

Props

Props是Vue中父组件向子组件传递数据的一种方式。父组件通过props属性将数据传递给子组件，子组件通过props接收数据并使用。

示例1：父组件向子组件传递数据

父组件的代码如下：

<template>
  <div>
    <child-component :message=\"parentMessage\"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent component'
    };
  }
};
</script>

子组件的代码如下：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

在父组件中，我们通过:message=\"parentMessage\"将parentMessage的值传递给子组件。子组件通过props: ['message']接收该值，并在模板中使用。

示例2：子组件向父组件传递数据

子组件向父组件传递数据的方式是通过触发自定义事件，并将数据作为事件的参数传递给父组件。

父组件的代码如下：

<template>
  <div>
    <child-component @childEvent=\"handleChildEvent\"></child-component>
    <p>Received message: {{ receivedMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: ''
    };
  },
  methods: {
    handleChildEvent(message) {
      this.receivedMessage = message;
    }
  }
};
</script>

子组件的代码如下：

<template>
  <div>
    <button @click=\"sendMessage\">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      const message = 'Hello from child component';
      this.$emit('childEvent', message);
    }
  }
};
</script>

在子组件中，我们通过this.$emit('childEvent', message)触发了名为childEvent的自定义事件，并将message作为参数传递给父组件。父组件通过@childEvent=\"handleChildEvent\"监听该事件，并在handleChildEvent方法中接收传递的数据。

以上是Vue2中父子组件传值的两个示例说明。通过props和自定义事件，我们可以实现灵活的数据传递和交互。