父子组件之间传参

在 Vue 2 中，父子组件之间的参数传递主要通过 props 和事件来实现。下面是一个简单的示例，演示了如何在父组件和子组件之间传递参数。

1. 使用 Props 从父组件传递数据到子组件

父组件 (Parent.vue)

<template>
  <div>
    <h1>父组件</h1>
    <child-component :message="parentMessage" :number="parentNumber"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!',
      parentNumber: 42
    };
  }
};
</script>

子组件 (Child.vue)

<template>
  <div>
    <h2>子组件</h2>
    <p>接收到的消息: {{ message }}</p>
    <p>接收到的数字: {{ number }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    },
    number: {
      type: Number,
      required: true
    }
  }
};
</script>

2. 使用事件从子组件传递数据到父组件

在子组件中，可以使用 $emit 方法来触发事件，父组件通过监听这个事件来接收数据。

父组件 (Parent.vue)

<template>
  <div>
    <h1>父组件</h1>
    <child-component :message="parentMessage" @childEvent="handleChildEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  },
  methods: {
    handleChildEvent(data) {
      console.log('从子组件接收到的数据:', data);
    }
  }
};
</script>

子组件 (Child.vue)

<template>
  <div>
    <h2>子组件</h2>
    <button @click="sendDataToParent">发送数据给父组件</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    sendDataToParent() {
      this.$emit('childEvent', '这是来自子组件的数据!');
    }
  }
};
</script>

总结

• 父组件向子组件传递数据：使用 props。
• 子组件向父组件传递数据：使用 $emit 触发事件。

这样的结构可以让父子组件之间的通信变得清晰和高效。