vue组件传值

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  },
  methods: {
    handleChildEvent(childData) {
      console.log('Received from child:', childData);
    }
  }
};
</script>

解释说明

1. 父组件向子组件传值:

   • 使用 v-bind 指令（简写为 :）将父组件的数据传递给子组件。在这个例子中，父组件通过 :message="parentMessage" 将 parentMessage 的值传递给子组件的 message 属性。

2. 子组件接收父组件传递的值:

   • 子组件可以通过 props 来接收父组件传递的值。在子组件中定义 props: ['message'] 即可接收父组件传递过来的 message。

3. 子组件向父组件传递事件:

   • 使用 $emit 方法可以在子组件中触发一个自定义事件，并将数据传递给父组件。例如，在子组件中调用 this.$emit('childEvent', someData) 可以触发名为 childEvent 的事件，并将 someData 传递给父组件。

4. 父组件监听子组件事件:

   • 父组件使用 v-on 指令（简写为 @）来监听子组件触发的事件。在这个例子中，父组件通过 @childEvent="handleChildEvent" 监听子组件的 childEvent 事件，并在事件触发时调用 handleChildEvent 方法处理接收到的数据。

如果你需要完整的子组件代码示例，请告知我。