vue 父組件中的子組件發生事件，子組件可以通過$listeners來監聽父組件在子組件發生的事件並且可以傳遞給父組件參數，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-child :content='content' @click='fn' @mouseenter='fn1' @click.native='fn'>
</my-child>
</div>
</body>
</html>
<script src="./node_modules/vue/dist//vue.min.js"></script>
<script>
// 組件通信：props $emit $attrs $listeners
let vm = new Vue({
el: '#app',
data: {
content: '點我'
},
components: {
'myChild': {
props: ['content'],
mounted() {
console.log(this.$listeners)
},
template: `<div>
<button @click='$listeners.click(123)'>{{content}}</button>
<button @click='$emit("click",12334)'>{{content}}</button>
<button @click='$emit("mouseenter",556)'>{{content}}</button>
</div>
`
}
},
methods: {
fn(num) {
console.log('fn iscall')
console.log(num)
},
fn1(num) {
console.log('fn1 iscall', num)
}
}
})
在這里子組件在mounted生命周期函數中監聽到父組件的事件通過組件的$listeners來監聽到，在子組件中可以調用父組件的方法，並且傳遞參數
也可以通過$emit 發射事件傳遞參數
</script>