好的，以下是一个简单的案例：
父组件 Parent.vue：
1. <template> 2. <div> 3. <h2>Parent Component</h2> 4. <child-component @text-updated="updateText"/> 5. <p>Text from child component: {{ childText }}</p> 6. </div> 7. </template> 8. 9. <script> 10. import ChildComponent from './Child.vue'; 11. 12. export default { 13. components: { 14. ChildComponent 15. }, 16. data() { 17. return { 18. childText: '' 19. } 20. }, 21. methods: { 22. updateText(text) { 23. this.childText = text; 24. } 25. } 26. } 27. </script>
子组件 Child.vue：
1. <template> 2. <div> 3. <h2>Child Component</h2> 4. <button @click="updateParentText()">Update Parent Text</button> 5. </div> 6. </template> 7. 8. <script> 9. export default { 10. methods: { 11. updateParentText() { 12. this.$emit('text-updated', 'Text updated from child component'); 13. } 14. } 15. } 16. </script>
在这个案例中，子组件通过调用 $emit 方法向父组件发送一个自定义事件 text-updated，并传递一个字符串参数来更新父组件中的 childText 数据，从而实现子组件调用父组件的方法。在父组件中，我们监听了 text-updated 事件，并将其对应的处理方法 updateText 定义在父组件中，当子组件调用 $emit 方法时，该方法会被自动触发，从而更新父组件中的数据。
