vue 组件之间传参内容是组件怎么传

Vue 组件之间传参可以通过 props 和 $emit 进行传递。

1. 通过 props 传参：

在父组件中定义子组件的 props，然后在子组件中使用这些 props。

// 父组件
<template>
  <child-component :prop1="value1" :prop2="value2"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      value1: 'prop1 value',
      value2: 'prop2 value'
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ prop1 }}</p>
    <p>{{ prop2 }}</p>
  </div>
</template>
<script>
export default {
  props: {
    prop1: String,
    prop2: String
  }
}
</script>

2. 通过 $emit 传参：

在子组件中触发事件，并传递需要传递的参数，然后在父组件中监听这个事件，获取子组件传递的参数。

// 子组件
<template>
  <button @click="handleClick">点击传递参数</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('my-event', 'hello world');
    }
  }
}
</script>

// 父组件
<template>
  <child-component @my-event="handleEvent"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleEvent(param) {
      console.log(param); // 输出 'hello world'
    }
  }
}
</script>