【Vue】子组件调用父组件的方法——案例

好的，以下是一个简单的案例：

父组件 Parent.vue：

<template>
  <div>
    <h2>Parent Component</h2>
    <child-component @text-updated="updateText"/>
    <p>Text from child component: {{ childText }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childText: ''
    }
  },
  methods: {
    updateText(text) {
      this.childText = text;
    }
  }
}
</script>

子组件 Child.vue：

<template>
  <div>
    <h2>Child Component</h2>
    <button @click="updateParentText()">Update Parent Text</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateParentText() {
      this.$emit('text-updated', 'Text updated from child component');
    }
  }
}
</script>

$emit
text-updated
childText
text-updated
updateText
$emit