vue组件与组件之间传参

在Vue中，组件之间传参有多种方式。下面是几种常见的传参方式：

1. Props（属性）：可以通过在父组件中使用v-bind指令，将数据作为props传递给子组件。子组件可以在props选项中定义接收的属性，并在模板中使用这些属性。

父组件模板中的示例代码：

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

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

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

子组件中的示例代码：

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

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

2. $emit（事件）：可以通过在子组件中使用$emit方法触发自定义事件，然后在父组件中监听此事件并响应。

子组件中的示例代码：

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

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

父组件模板中的示例代码：

<template>
  <div>
    <child-component @message-sent="handleMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
}
</script>

这些是常见的组件间传参方式，你可以根据具体需求选择适合的方式。如果还有其他问题，请继续提问。