1子組件

mongo.vue

<template><button @click="eat">按鈕</button> </template><script> export default {created() {this.$on("eat", function(fruit) {console.log("子組件接收自己發射的事件");});},methods: {eat() {console.log("子組件發射事件");this.$emit("eat", "芒果");}} }; </script> <style> </style>

2父組件

app.vue

<template><div id="app"><h3>{{name}}</h3><!-- 子組件 --><mongo @eat='eat'/></div> </template><script> import Mongo from "./components/Mongo";export default {name: "app",data() {return {name: ""};},methods: {eat(fruit) {console.log("父組件接收事件");this.name = fruit;}},components: { Mongo } }; </script><style> </style>

運行結果

總結

以上是生活随笔為你收集整理的工作184：自定义事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。