vue动态组件子组件想父组件传值

在 Vue 中，子组件向父组件传值需要使用自定义事件。具体实现步骤如下：

1. 在子组件中定义一个自定义事件，并使用 `$emit` 触发该事件，同时传递需要传递的值。

// 子组件
<template>
  <button @click="handleClick">{{ text }}</button>
</template>

<script>
export default {
  props: ['text'],
  methods: {
    handleClick() {
      this.$emit('button-clicked', this.text);
    }
  }
}
</script>

2. 在父组件中监听该自定义事件，并在事件处理函数中获取子组件传递的值。

// 父组件
<template>
  <div>
    <button-component :text="buttonText" @button-clicked="handleButtonClick"></button-component>
    <p>当前点击的按钮文本：{{ clickedButtonText }}</p>
  </div>
</template>

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

export default {
  components: { ButtonComponent },
  data() {
    return {
      buttonText: '点击我',
      clickedButtonText: ''
    }
  },
  methods: {
    handleButtonClick(text) {
      this.clickedButtonText = text;
    }
  }
}
</script>

在上述代码中，子组件 `ButtonComponent` 定义了一个 `button-clicked` 自定义事件，并在按钮点击事件中触发该事件，同时传递了按钮的文本内容 `this.text`。在父组件中，通过 `@button-clicked` 监听该自定义事件，并在事件处理函数 `handleButtonClick` 中获取子组件传递的值，最后将该值赋值给 `clickedButtonText` 数据，从而实现了子组件向父组件传值的功能。