vue prop属性

<template>
  <div>
    <child-component :message="parentMessage" @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    handleCustomEvent(payload) {
      console.log('Custom event triggered with payload:', payload);
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="triggerCustomEvent">Trigger Custom Event</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    triggerCustomEvent() {
      this.$emit('custom-event', { data: 'Some data' });
    }
  }
};
</script>

解释说明

1. 父组件传递 prop 给子组件:

   • 在父组件中，通过 :message="parentMessage" 将 parentMessage 的值传递给子组件的 message 属性。
   • 子组件通过 props 接收这个属性，并在模板中使用。

2. 子组件触发自定义事件:

   • 子组件通过 $emit 触发一个名为 custom-event 的自定义事件，并传递一个对象作为事件的负载（payload）。
   • 父组件通过 @custom-event="handleCustomEvent" 监听这个事件，并在事件触发时调用 handleCustomEvent 方法处理。

3. 数据流动:

   • 数据从父组件流向子组件是单向的（通过 prop），而事件则是从子组件流向父组件（通过 $emit）。