vue 父子组件之间传值

在Vue中，父组件与子组件之间传值有多种方式：

1. Props: 父组件通过props向子组件传递数据。在父组件中使用子组件时，可以通过属性的形式将数据传递给子组件。子组件通过props选项来接收父组件传递的数据。例如：

// 父组件
<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'
    };
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

2. $emit: 子组件通过$emit方法向父组件发送事件，并携带需要传递的数据。父组件监听子组件触发的事件，并在事件处理函数中获取子组件传递的数据。例如：

// 父组件
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
    <p>Message from child: {{ childMessage }}</p>
  </div>
</template>

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

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

// 子组件
<template>
  <div>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('custom-event', 'Hello from child');
    }
  }
};
</script>

这些是Vue中父子组件之间传值的两种常见方式，根据具体场景选择合适的方式进行数据传递。